We have been playing about with jQuery mobile at the office and its a great way to deliver specific mobile content and of course it works with PhoneGap for compiling those apps to (near native).

But we had a couple of teething issues due to the documentation being a little all over the place and the examples being a little too simple from the recommended approaches, and the voodoo it does.

First Glossary, in jQuery mobile each page is a screen displayed in the browser that is transistioned (sometimes in a fancy way) to or from.  These pages are essentially (ootb)

sections with an attribute of data-role=”page”.  Now in the demos and examples you will find in the docs and other sites these “Multi-Page” demos are seperate pages displayed on the phone, but in terms of files on the file system they are all in the same htm page.

See demo MultiPage-Template

Now this is great for a couple of pages all based on ajax filled content, but where there are many pages then thats the time to split those pages out onto the file system into seperate documents.

The documentation recommends this approach because as the new page is loaded the last page is removed from the DOM thus saving memory (there are techniques to force caching of pages).  This is where the some of the confusion can arise as there are so few examples explaining whats happening.

The default behavior for jQuery mobile when navigating about these separate htm files that are defined as pages of the app is that it uses ajax to load them. It can then take that content and inject it into the DOM and then transition between the two. 

The problem we encountered due to the lack of demos and not reading docs is that where did we put the scripts the css what happens on page load etc.  Well it’s actually been made really simple and the thing to remember is this –

Taken from the documentation

Scripting pages->Scripts and styles in the head

http://jquerymobile.com/demos/1.2.0/#/demos/1.2.0/docs/pages/page-scripting.html

When the user clicks a link in a jQuery Mobile-driven site, the default behavior of the navigation system is to use that link’s href to formulate an Ajax request (instead of allowing the browser’s default link behavior of requesting that href with full page load). When that Ajax request goes out, the framework will receive its entire text content, but it will only inject the contents of the response’s body element (or more specifically the data-role="page" element, if it’s provided), meaning nothing in the head of the page will be used (with the exception of the page title, which is fetched specifically). Please note that scripts loaded dynamically in this fashion do not guarantee a load order in the same way they would if the page was loaded via a normal http request.

This means that any scripts and styles referenced in the head of a page won’t have any effect when a page is loaded via Ajax, but they will execute if the page is requested normally via HTTP. When scripting jQuery Mobile sites, both scenarios need to be considered. The reason that the head of a page is ignored when requested via Ajax is that the potential of re-executing the same JavaScript is very high (it’s common to reference the same scripts in every page of a site). Due to the complexity of attempting to work around that issue, we leave the task of executing page-specific scripts to the developer, and assume head scripts are only expected to execute once per browsing session.

This is the key to how it all works under the hood.

So when coding a simple app in jQuery mobile in multiple pages then a simple layout might be this.  This is a simplification of the jquery mobile multi-page boiler template split across two files.

The second file does not need any of the jquery, css, or other js files.  As the navigation system looks for a div of data-role page and squirts it in.  NOTE multi-page/Multiple Page combos are not allowed it will likely fall on its face, so dont stick more than one date-role=”page” into these Multiple Page designed apps.

 

Main.html

Multi-page template
http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css” />
http://ahref=
http://ahref=

   $(‘#home’).on(‘pageinit’, function () { 
       console.log(‘home page-init’);
   });

 

function Yay() {
    console.log(‘Yay’);
}

   

   
       

One

       

I have an id of “home” on my page container. I’m first in the source order so I’m shown when the page loads.

   

       

Link to Other Page:

       

Show page “two”

    
   

</div>

</body>
</html>

Page2.html

<!DOCTYPE html>
<html>
<head>

<title>Page Two</title>
</head>

<body>

$(‘#two).on(‘pageinit’, function () {

    console.log(‘page two pageinit’);

    Yay();  //Call a function in the parent container, cos Im just injected

});

   

   
       

Two

       

I have an id of “two” on my page container. I’m the second page container in this multi-page template.

   
       

Notice that the theme is different for this page because we’ve added a few data-theme swatch assignments here to show off how flexible it is. You can add any content or widget to these pages, but we’re keeping these simple.

   
       

Back to page “one”

   
   

</div>

</body>
</html>

 

So that being the case where do I stick the code.  Well consider it like this if its a library code stick it in the home page as that outer page is always there and loaded, however when you need stuff to happen that script should be in the page <div> as it will be loaded and injected into the main page container and executed at that point.

There are lots of other things to learn about events and injections but if you can get this bit right then the rest should just follow.

I strongly urge you to read all of the docs on jquery mobile especially around pages as understanding this navigation and the weird vood0o it does with the navigation is key to writing your code in the right place.