i using jquery mobile in building site, i've included jquery ui few features missing mobile such date picker (for part of site accessed form desktop). works fine when loading page directly, can't navigate page elsewhere in site - ajax loading spinner spins. see error in console: typeerror: $(...).datepicker not function. assume related ajax page loading of jquery mobile , fix related pageinit info in api info, lack understanding apply this.
in other words, how turn <script> $("#mydatepicker").datepicker(); </script> works on pageinit?
edit: page head requested:
<head> <meta charset="utf-8"> <title>test site</title> <meta name="handheldfriendly" content="true"> <meta name="mobileoptimized" content="320"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="cleartype" content="on"> <link rel="stylesheet" href="_css/normalize.css" /> <link rel="stylesheet" href="_css/red_ui_variant/jquery-ui-1.10.3.custom.min.css" /> <link rel="stylesheet" href="_css/jquery.mobile.structure-1.3.1.css" /> <link rel="stylesheet" href="_css/red_mobile_variant.css" /> <link rel="stylesheet" href="_libraries/foundation-4.1.5.custom/css/foundation.css" /> <link rel="stylesheet" href="_css/main.css" /> <script src="_scripts/vendor/custom.modernizr.js"></script> <script src="ckeditor/ckeditor.js"></script> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="_scripts/jquery-migrate-1.1.1.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> </head>
when using jquery ui jquery mobile important initialize before jquery mobile, not work in other case. head should this:
<head> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densitydpi=device-dpi"/> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <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.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> </head> one thing, have mentioned, datapicker must initialized inside jqm page event. in case can use page event stick pageinit.
do this, if html:
<div data-role="page" id="index"> <div data-theme="a" data-role="header"> <h3> first page </h3> <a href="#second" class="ui-btn-right">next</a> </div> <div data-role="content"> <p>date: <input type="text" id="datepicker" /></p> </div> <div data-theme="a" data-role="footer" data-position="fixed"> </div> </div> then initialize datapicker this:
$(document).on('pageinit', '#index', function(){ $( "#datepicker" ).datepicker(); }); and here's working example: http://jsfiddle.net/gajotres/ssqkz/
one last thing, if want find more jquery mobile page events take @ other answer: jquery mobile: document ready vs page events
Comments
Post a Comment