jQuery Mobile | Navigation between Pages

Question

I am fairly new at JQM and i am trying to build mobile application using jQuery Mobile.

Below is what i am trying to achieve..

I have few HTML pages with each having its own css, javascript and JQM pages. What i need is when i change to another html file and do back on the back button using data-rel="back" i get restored to the previous html file in the state i left it in.

I tried using pagecontainer change function, but it does not load javascript on the new loaded html file. It tried using the following code.

$( document ).on( "vclick", '.openTutorial', function(){
    $.mobile.pageContainer.pagecontainer("change", "tutorial.html", { 
        reload : true
    });
});

Also i tried another option which was pagecontainer load but this time its not even redirecting. I used the following code.

$( document ).on( "vclick", '.openTutorial', function(){
    $.mobile.pageContainer.pagecontainer("load", "tutorial.html", { });
});

Is it achievable in JQM.

If Yes then how do i navigate to the other html file so that its javascript and css in the head get loaded. And when i go back using data-rel="back" the previous state is restored.

If No then how do i achieve this. I mean what changes should i make..

Thanks.. Much appreciate any help.

Answer 1

Short answer..

• Ajax Enabled : No, it is not possible.
• Ajax Disabled: Yes, it is possible.

---

Details

Ajax Enabled:

When you use Single Page Model, you have to make sure that you fulfill the below points:

1. For each HTML, place jQuery, jQM.css and jQM.js in head.
2. Custom JS should go inside data-role=page div.
3. Each data-role=page div in a separate HTML file.

Note: jQM loads ONLY first data-role=page div of each HTML file into DOM. Anything outside data-role=page div is neglected. That's why Custom JS should be placed inside that div.

When you navigate away from a page (except very first page loaded) jQuery Mobile removes that page from DOM. Unless you cache it by adding data-dom-cache="true" to data-role=page div. The page is removed from DOM, however, CSS and JS are cached. To remove them, you need to refresh/reload the page completely.

Hence, when you navigate from pageX.html to pageY.html via Ajax, if you override CSS in pageZ, they will be applied on pageX (in case you used same selectors).

To safely override CSS of different pages, create custom classes and addClass() / removeClass() depending on page. Or, use #pageID selector to be more specific when you override CSS. The same applies for JS, you should be specific when you use Page Events.

Ajax Disabled:

You can do whatever you want, the website will be using HTTP not Ajax.

Demo

Answer 2

Not sure you can restore the previous state with several html files.

You should use the multi-page template of JQM and set all your html in one file with each page in a div with the data-role="page" and a specific id :

<div data-role="page" id="foo">
</div>
<div data-role="page" id="bar">
</div>

With that, you will be able to keep the state of each pages.

The JQM documentation : http://demos.jquerymobile.com/1.4.2/pages/#Multi-pagetemplatestructure