When does jQuery Mobile reload a page when browsing back and forth?

Question

I am trying to avoid reloading as much as possible when browsing back and forth in my mobile webapp. JQuery Mobile seems to be designed for that but I am having troubles taming this behavior.

Basically, I have two pages (page1 and page2). page1 has a link to page2 and vice versa. The first time they are loaded, both pages (i) load data in ajax and (ii) change the DOM structure accordingly. I use a global var to avoid reloading the data, which works quite well.

Let's say page1 (resp page2) has a DOM structure called dom10 (resp dom20) in the html and dom11 (resp dom21) after everything is loaded.

Here is my problem:

I load page1, the data is loaded and the DOM is changed from dom10 to dom11
I then click on <a href="page2">click</a>, page2 is loaded, the data is retrieved and the DOM is changed from dom20 to dom21. So far so good.
I then click on <a href="page1">click</a> to go back. The page is just as I left it with dom11. Wonderful, there were no GET call at all.
I finally click on <a href="page2">click</a> again and that's where it hurts. The page is loaded again (GET call), the data is not retrieved but the dom is set back to dom20

I can keep on clicking back on forth and I always get the same behavior. Whenever I click on page1 I get the DOM just as I left it, whenever I click on page2 there is a GET call and the DOM is reloaded.

So here is my question, is there a way to prevent reloading a page that was already loaded in jQuery Mobile?

I can think of workarounds to have my DOM as I want but I would love to avoid unnecessary calls slowing down my app.

If you want to play around with it, you can try it there.

Thanks a lot for your help!

PS: Surprisingly, I don't get the same behavior on Firefox and Chrome... I am afraid it is not so simple.

score 4 · Accepted Answer · edited May 23 '17 at 10:34

By default jQM always makes an AJAX request for pages even if you've already visited it before. If you set $.mobile.page.prototype.options.domCache = true; then only will jQM not reload pages.

If so you will need to set reloadPage to true when you call $.mobile.changePage if you need to refresh the page - otherwise the page will be stale.

Becareful though, if you do this all your pages will be appended to the DOM resulting in a massive DOM which impacts performance - you'll need to manage it all properly in your JS which is a different topic. But imagine doing an open-ended $('.myClass') search when you have 20 pages in your DOM. I have more details in an older answer I wrote: Jquerymobile - $.mobile.changepage

Thank you, it makes a lot of sense. I will make sure there are not too many backlashes by doing so in my case, maybe reloading the DOM structure is not so bad after all if it cleans out the page, however, I need to make sure I avoid redoing the complex initialization stuff, which can be done easily through javascript. — Mad Echet, Mar 01 '12 at 10:32

score 1 · Answer 2 · answered Feb 29 '12 at 17:10

You're using the 'Single Page Layout' which loads each page via ajax:

http://jquerymobile.com/demos/1.0.1/docs/pages/page-template.html

Each link or form from here will pull a new page in via Ajax to support the animated page transitions

I would look at the multi-page layout

http://jquerymobile.com/demos/1.0.1/docs/pages/page-anatomy.html

Search for section 'Multi-page template structure' section.

So your example would be:

<!DOCTYPE html> 
<html> 
 <head>
  <title>test</title>
  <meta charset="utf-8">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
    <script src="jquery/jquery-ui-1.8.18.custom.min.js"></script>
    <script>var doNotLoadPage1Again = false; var doNotLoadPage2Again = false;</script>
 </head> 
 <body>
  <div data-role="page" id="page1">
   <p id="info">loading...</p>
   <a href="#page2">page2</a>
   <script>
    if(!doNotLoadPage1Again) {
      // do some heavy loading stuff
      $("#page1 #info").html("loading done");
      doNotLoadPage1Again = true;
    }
    </script>
  </div>
<!-- Page 2-- >
  <div data-role="page" id="page2">
   <p id="info">loading...</p>
   <a href="#page1">page1</a>
   <script>
    if(!doNotLoadPage2Again) {
      // do some heavy loading stuff
      $("#page2 #info").html("loading done");
      doNotLoadPage2Again = true;
    }
    </script>
  </div>
 </body> 
</html>

Thank you, it does solve my specific example. However I still like to have seperate pages because in my actual case they are much longer and have seperate purposes. I will try do dig deeper into $.mobile.page.prototype.options.domCache to see if I find the perfect solution for my case. — Mad Echet, Mar 01 '12 at 10:35

When does jQuery Mobile reload a page when browsing back and forth?

2 Answers2