jQuery Mobile Page won't load if jQuery UI widget (datepicker) called on the page?

Question

I am using jQuery Mobile primarily in building this site, but I've included jQuery UI for a few features missing from Mobile such as a date picker (for a part of the site primarily accessed form desktop). Everything works fine when loading the page directly, but I can't actually navigate to the page from elsewhere in the site - the AJAX loading spinner just spins. I see an error in the console: TypeError: $(...).datepicker is not a function. I assume this is related to the AJAX page loading of jQuery Mobile and that the fix is related to the pageinit info in the API info, but I lack the understanding to apply this.

In other words, how do I turn <script> $("#mydatepicker").datepicker(); </script> into something that works on pageinit?

Edit: Page head as 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>

Add HTML HEAD to your question? I think I know what could be the problem but first I need to see your HTML. — Gajotres, May 05 '13 at 22:04

score 4 · Accepted Answer · edited May 23 '17 at 12:04

When using jQuery UI with jQuery Mobile it is important to initialize it before jQuery Mobile, it will not work in any other case. Basically your HEAD should look like 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 another thing, like you have mentioned, datapicker must be initialized inside a jQM page event. In this case you can use any page event but usually it is good to stick with pageinit.

Do it like this, if this is your 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 you would initialize datapicker like this:

$(document).on('pageinit', '#index', function(){       
    $( "#datepicker" ).datepicker();
});

And here's a working example: http://jsfiddle.net/Gajotres/sSqKz/

One last thing, if you want to find more about jQuery Mobile page events take a look at my other answer: jQuery Mobile: document ready vs page events

jQuery Mobile Page won't load if jQuery UI widget (datepicker) called on the page?

1 Answers1