I have this simple code, like that on the official site.
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="jquery.ui.all.css">
<script src="jquery-1.6.2.js"></script>
<script src="jquery.ui.core.js"></script>
<script src="jquery.ui.widget.js"></script>
<script src="jquery.ui.datepicker.js"></script>
<link rel="stylesheet" href="demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' });
});
</script>
</head>
<body>
<div class="demo">
<p>Date: <input type="text" id="datepicker"></p>
</div>
</body>
</html>
Obviously in the same folder I've moved the interested files and all works ok.
But the layout is awful, because sure miss something.
My output is this:
http://imageshack.us/photo/my-images/854/wrongdate.png/
How can I solve this problem?
Thank you.
I dare say it's the style file: you probably have an incorrect path for the file or the file is corrupted. See the following two examples:
without css: http://jsfiddle.net/william/5Xa8f
with css: http://jsfiddle.net/william/5Xa8f/2/
To confirm it is the problem, simply replace jquery.ui.all.css with http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css, and see if the problem is fixed.
Related
In this example,
http://jsfiddle.net/7Ev43/2/ the inclusion of the first <script> line (<script src="http://www.polymer-project.org/platform.js"></script>) causes the jQueryMobile events pagebeforecreate and pageinit events not to fire, in Safari and Firefox. However, it works in Chrome.
Any ideas on how to amend this?
Further investigation:
It appears that on Firefox and Safari, platform.js is overriding addEventListener
At this point I'm not sure how to proceed further, any suggestions would be most welcome.
full example:
<!DOCTYPE >
<html>
<head>
<script src="http://www.polymer-project.org/platform.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js" type="text/javascript"></script>
<script>
$(document).on('mobileinit', '#mainpage', function(){
console.log("mobileinit");
})
$(document).delegate("#mainpage", "pagebeforecreate", function(){
console.log("pagebeforecreate")
})
$(document).on("pageinit", '#mainpage', function()
{
console.log("pageinit")
});
console.log('end of script')
</script>
</head>
<body>
<div id="mainpage" data-role="page" data-theme="b">
</div>
</body>
</html>
Ok so im expanding my existing MVC4 app into a mobile app.
Totally new to jquery mobile and im having so many issues with this in MVC.
Layout pages (MVC) and jquery mobile are a nightmare to work with or is it just me?
So im simply trying to show jquery ui datepicker in my page, it does not show!
I have to do a reload of the page for it to show, why???
Ok Layout page
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"/>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
</head>
<body>
#RenderBody();
</body>
</html>
and now the view
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_AppLayout.Iphone.cshtml";
}
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
#using (Html.BeginForm())
{
<div data-role="page" id="pageAccount">
<div data-role="content">
<div id="datepicker"></div>
</div>
</div>
}
Any ideas why the page shows, but no datepicker (I have to reload the page for it to show)?
Solution :
This should be changed:
$(function() {
$( "#datepicker" ).datepicker();
});
to this:
$(document).on('pageshow', '#pageAccount', function(){
$( "#datepicker" ).datepicker();
});
To make a story short. jQuery Mobile should not be used with classic DOM ready jQuery functions. Instead jQuery Mobile is providing us with page events. If you want to find out more about jQuery mobile page events and how they work take a look at this ARTICLE, to make it transparent it is my personal blog. Or you can take a look HERE.
Edit :
Here's a working example:
Change positions of
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
into:
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
jQuery Mobile should always load last when used with jQuery UI.
Also you have forgot jQuery UI CSS, you will find datepicker without its CSS formatting.
Why the following code doesn't work? (if I change remote source there to local, then it works well)
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("input#autocomplete").autocomplete({
source: "http://jqueryui.com/demos/autocomplete/search.php",
minLength: 2,
select: function( event, ui ) {
}
});
});
</script>
<style>
.ui-autocomplete-loading { background: white url('http://jqueryui.com/demos/autocomplete/images/ui-anim_basic_16x16.gif') right center no-repeat; }
</style>
</head>
<body style="font-size:62.5%;">
<input id="autocomplete" />
</body>
</html>
same origin policy as the source requires a script from another site to be run.
http://en.wikipedia.org/wiki/Same_origin_policy
You could change the source to use a jquery ajax call to another site which can return jsonp.
See this for an example: http://jqueryui.com/demos/autocomplete/#remote-jsonp
or ensure that the source url given returns jsonp.
I'm trying to use JQueryMobile for an POC and it seems even though I use #using (Html.BeginForm()) instead of #using (Ajax.BeginForm()), ajax is enabled by default. It is being injected from one of the script files [ ~/Scripts/jquery.mobile-1.0a2.js ].
So what I want is to simply disable the Ajax for certain forms and do full form posts. This might be pretty abvious, but i simply cant get my head around it.
Any help is appreciated.
/BB
You have to set up the jquery mobile framework correctly to disable its auto - ajax
Here it's documented:
http://jquerymobile.com/demos/1.0a3/#docs/api/globalconfig.html
You could do something like this.
<html lang="en-us">
<head>
<title>#ViewBag.Title</title>
<link href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.min.js")" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).bind("mobileinit", function () {
$.mobile.ajaxFormsEnabled = #ViewBag.EnableAjax;
});
</script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" data-cache="never">
<div data-role="header">
<h1>#ViewBag.HeaderString</h1>
</div>
<div data-role="content">
#RenderBody()
</div>
<div data-role="footer">
<h1>HTDE</h1>
</div>
</div>
</body>
</html>
Just add the following line to your page, obviously you have too add this under the document.Ready() function:
$.mobile.ajaxEnabled = false;
Note: If you are using Jquery Mobile beta, the configuration parameter for disabling ajax has changed.
http://jquerymobile.com/blog/2011/06/20/jquery-mobile-beta-1-released/
"Use ajaxEnabled to globally set auto-ajax handling."
Here's a link to the documentation for beta configs:
http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/api/globalconfig.html
It took me way to long to figure this one out.
there is an easier way.. just figured it out from JqueryMobile documentation
http://jquerymobile.com/demos/1.0a3/#docs/api/globalconfig.html
all you have to do is,
ajaxFormsEnabled :false
I must be missing something very basic in the CSS. My jQuery anchor button is functional, but it's rendering as a simple underlined label, not asa rounded-corner UI button. I would be grateful if someone could point out the error in this simple example.
Thanks
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML LANG="en-US">
<HEAD>
<TITLE>button test</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Expires" content="Sat, 22 May 2010 00:00:11 GMT">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<SCRIPT type="text/javascript">
$(document).ready(
function() {
$('a','.test').click(function(){showIntro();return false;});
});
function showIntro()
{
document.location.href="intro.htm";
}
</script>
<body>
<div class='test'>Button</div>
</body>
</html>
You need to actually make it a button using .button(), like this:
$(function() {
$(".test a").button();
});
You can see the jQuery UI demos here and a demo of your markup working here.
You need to add the proper class to the link, using jQuery or otherwise.
Try:
Button
You do not need to make it a button you just need
$(".test a").click(function(){showIntro();return false;});
What you are trying to do with your selector passing the second paramater is the Scope.
The second paramater is not mean to be a string (selector) it should be a jQuery Object.
So if you wanted to do it your way your would have to say
var test = $('.test');
$('a',test).click...
But the 1st method is prefered over doing it this way.
Sorry to be providing an answer, if not "the" answer, to my own question, but I have discovered a clue as to what's going on, if not the ultimate cause of the behavior. Below is code cut and pasted from the Button example on the jQuery website; take it to jsFiddle and run it: it works. But if you remove this line relating to the input-button:
$("button, input:submit, a", ".demo").button();
then the anchor-button fails to render properly. Why is the anchor-element's rendering dependent on the existence of the input-button?
<script type="text/javascript">
$(function() {
$("button, input:submit, a", ".demo").button();
$("a", ".demo").click(function() { return false; });
});
</script>
<style>
</style>
<div class="demo">
<button>A button element</button>
<input type="submit" value="A submit button">
An anchor
</div><!-- End demo -->