jQuery Mobile: Some scripts running, some not. Can't figure out why

Question

jQuery Mobile and loading additional scripts is killing me. I've reviewed their documentation and I understand that their AJAX model causes some complexity, I've gotten some help from here to apply the info, but I still can't get everything to work consistently. Here's an example:

I have a page with 2 form fields, one for date and one for time. I am calling the jQuery UI Datepicker on the date field and a 3rd party Timepicker on the time field (this timepicker). If I access the page directly or do a refresh, both run just fine. But if I navigate to the page from elsewhere, only the datepicker runs. They are both linked in my document head and both called on the page with pageinit. Why does one work but not the other?

Head:

<!DOCTYPE html>
<!--[if IE 8]>               <html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->
  <head>
    <meta charset="utf-8">

    <title>Test Site</title>

    <!-- Make it Mobile friendly -->
    <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">

    <!-- Stylesheets -->
    <link rel="stylesheet" href="_css/normalize.css" />
    <link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
    <link rel="stylesheet" href="_css/jquery.mobile.structure-1.3.1.css" />
    <link rel="stylesheet" href="_css/red_variant/red_variant.css" />
    <link href="_libraries/jquery-ui-timepicker-0.3.2/jquery.ui.timepicker.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="_css/foundation.css" />
    <link rel="stylesheet" href="_css/main.css" />

    <!-- jQuery Including UI and Mobile -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
    <script src="_libraries/jquery-ui-timepicker-0.3.2/jquery.ui.timepicker.js" type="text/javascript"></script>

</head>

Form in question:

<form>
    <label for="addAgendaDate" class="ui-hidden-accessible">Date:</label>
<input name="addAgendaDate" id="addAgendaDate" placeholder="Date" value="" type="text">
    <label for="addAgendaTime" class="ui-hidden-accessible">Time:</label>
<input name="addAgendaTime" id="addAgendaTime" placeholder="Time" value="" type="text">
</form>

<script>
        $(document).on('pageinit', function(){       
            $( "#addAgendaTime" ).timepicker({
                showPeriod: true,
                showLeadingZero: true
            });
        });

        $(document).on('pageinit', function(){       
            $( "#addAgendaDate" ).datepicker();
        });
</script>

What am I missing that causes both to work on normal page load but only one to work on jQuery Mobile AJAX loading?

Resolved! It took a month, but I finally wrapped my head around this. Gajotres and Kevin B were instrumental in getting me to understand the underlying script use issues, but each of my script problems ended up having different additional problems:

The date and time picker inconsistency below was actually due to a CSS issue with z-index. Time picker was popping and working fine script-wise, but for some reason jQueryUI was setting its z-index inline to zero, which put it behind the mobile page overlay. CSS override (had to do an !important) fixed that.
Had an issue with jQuery Countdown which was an ID duplicate issue since I had a PHP include pulling the same footer into each page. Changed to class to resolve.

Because ID's must be unique, and in JQM, pages aren't removed from the DOM when the next page is navigated to, resulting in any ID's that are on both pages conflicting. — Kevin B, May 07 '13 at 18:05

score 5 · Accepted Answer · edited Jun 20 '20 at 09:12

How jQuery Mobile handles page changes

To understand this situation you need to understand how jQuery Mobile works. It uses ajax to load other pages.

First page is loaded normally. Its HEAD and BODY is loaded into the DOM, and they are there to await other content. When second page is loaded, only its BODY content is loaded into the DOM.

That's why your button is show successfully but click event is not working. Same click event whose parent HEAD was disregarded during the page transition.

If you want to find out more read my other article: Why I have to put all the script to index.html in jquery mobile

Here's an official documentation: http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html

Unfortunately you are not going to find this described in their documentation. Ether they think this is a common knowledge or they forgot to describe this like my other topics. (jQuery Mobile documentation is big but lacking many things).

Solution 1

In your second page, and every other page, move your SCRIPT tag into the BODY content, like this:

<body>
    <script>
        // Your javascript will go here
    </script>
    // And rest of your HTML content
</body>

This is a quick solution but still an ugly one.

Solution 2

Move all of your javascript into the original first HTML. Collect everything and put it inside a single js file, into a HEAD. Initialize it after jQuery Mobile has been loaded.

<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/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
    <script src="index.js"></script> // Put your code into a new file
</head>

In the end I will describe why this is a part of a good solution.

Solution 3

Use rel="external" in your buttons and every elements you are using to change page. Because of it ajax want be used to load pages and your jQuery Mobile app will behave like a normal web application. Unfortunately this is not a good solution in your case. Phonegap should never work as a normal web app.

<a href="#second" class="ui-btn-right" rel="external">Next</a>

Official documentation, look for a chapter: Linking without Ajax

Realistic solution

Realistic solution would use Solution 2. But unlike solution 2, I would use that same index.js file and initialize it inside a HEAD of every possible other page.

Now you can ask me WHY?

Phonegap like jQuery Mobile is buggy, and sooner or later there's going to be an error and your app will fail (including loaded DOM) if your every js content is inside a single HTML file. DOM could be erased and Phonegap will refresh your current page. If that page don't have javascript that it will not work until it is restarted.

Thanks, sorry for the delayed response. I still cannot get the scripts to behaive consistently. I've tried all 3 options - I already had the scripts being loaded in the body for the original issue. Moving to a file linked in the head still didn't resolve, and disabling AJAX is not wokring. I don't understand what I'm doing wrong. — Chaz, May 17 '13 at 15:47
If it is not a problem mail me your project and I will fix it for you. Usually it is something simple and you need second pair of the eyes to find a problem. My mail: dragan.gaic@gmail.com — Gajotres, May 17 '13 at 15:53
I appreciate the offer, unfortunately this is a work project and I can't send. I did make some headway on one of the scripts I was having issues with (ckeditor in that case) by moving it to only a few specific pages - but it's still inconsistent on others. I just posted another related question specifically on the jQuery Countdown script: http://stackoverflow.com/questions/16614659/script-failing-to-modify-footer-on-jquery-mobile-page-on-ajax-page-load — Chaz, May 17 '13 at 17:20