Question

By default, if you use ajax navigation of jQuery Mobile for loading a multi-page template html file, it doesn’t work and just first page loads.

One method is using rel="external", but it doesn’t look well in a mobile phone or a tablet… (It should have animation!)

Isn’t there any better way? How to completely load a multi-page template html with jQuery Mobile ajax navigation?

Answer 1

You can programmatically load pages into the DOM by using

pageContainerElement.page({ domCache: true });

The drawback of DOM caching is that the DOM can get very large, resulting in slowdowns and memory issues on some devices. If you enable DOM caching, take care to manage the DOM yourself and test thoroughly on a range of devices.

Here’s the link: http://jquerymobile.com/test/docs/pages/page-cache.html

UPDATE 1

You would put that code in a separate file, i.e. custom-code.js and put it in your header after you load jQuery but BEFORE you load jQuery Mobile.

So if your page container looks like this:

<div data-role="page" data-theme="a" data-dom-cache="false" class="page blog-post">

You would put div.page({ domCache: true }); and then in the head of all of the pages where you pull in jQuery and jQuery mobile, it would look like this:

// Pull in jQuery
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
// Pull in your custom jQuery Mobile rules/scripts
<script src="../path/to-file/custom-code.js"></script>
// Pull in jQuery Mobile
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>

UPDATE 2

The code above will cache that particular page. If you want to load ALL pages into the DOM, inside of the custom-code.js file, place this code and specify separately (one instance for each page) each page that you want to load into the DOM:

$.mobile.loadPage( pageUrl, { showLoadMsg: false } );

Prefetching pages naturally creates additional HTTP requests and uses
bandwidth, so it’s wise to use this feature only in situations where
it’s highly likely that the prefetched page will be visited.

Also, if you want to pre-fetch all of the pages linked to on the current page, just add data-prefetch to the link.

For example:

<a href="page_2.html" data-prefetch>Link to other page</a>