Why Do Dynamic Pages Reload When Back Button is Clicked?

Question

I have been working with jQuery mobile 1.0.1.

I have a page which drills down to a listing page. The listing page is created dynamically because the links to it have href's to a separate page.

The thing I find confusing, is that when I click the back button from the detail page, there is an ajax call to grab the listing page. I don't see why this has to happen as the listing page is in the DOM.

Not only is it inefficient, but let's say I had filtered the list on the listing page, that information will be lost when the listing page reloads.

I found a workaround where have the empty listing page on the first page that loads, I then dynamically modify it by making the ajax call myself. When I do this, it doesn't make the ajax call when going from the detail page back to the listing page.

Any help would be appreciated.

Answer 1

jQuery Mobile removes pseudo-pages from the DOM after they are navigated away from (this is for external pages only). You can stop this behavior on a single pseudo-page by adding the data-dom-cache="true" attribute to the data-role="page" element for the pseudo-page:

<div data-dom-cache="true" data-role="page">
    ...
</div>

There are other ways to enable (well disable really I guess) this functionality; you can read about them here: http://jquerymobile.com/demos/1.0.1/docs/pages/page-cache.html