stop jQuery mobile from caching dynamic page

With jQuery mobile I'm using a dynamic 'page' template with custom content inserted depending on user input.

It all works, but once the page is created once it's cached and won't display the new values if you go back and make a new selection. I've tried applying the following fix:

$('#instrument').bind('pagehide', function(){
  $(this).remove();
});

Which does remove the page, but if you try to navigate back to that page it won't re-initialize and I'll just keep getting pushed back to the beginning of my app.

The dynamic content has to be added to the page using pagebeforecreate (the actual HTML doesn't seem important, so I won't include it here) otherwise it won't be formatted. If I use pagebeforeshow the content will not be formatted, but it WILL change if you go back and make a new selection.

I realize that pagebeforecreate will cache the page, but it doesn't appear that I can use any ot开发者_StackOverflow中文版her method due to the content not formatting :(

I can't for the life of me figure out a fix!

Try using pagebeforeshow but call page() when the page is shown to fix up all the formatting.

Like this:

$('#instrument').bind('pagebeforeshow', function() {
  // Do your content insertion
});

$('#instrument').bind('pageshow', function() {
  $(this).page();
});

You may find that this only "half" works (doesn't update formatting when page is updated), in which case you might try this trick: wrapping up the page in a temporary element and calling page() on the wrapper.

$('#instrument').bind('pageshow', function() {
  $(this).wrap('<div id="temporary-instrument-wrapper">');
  $('#temporary-instrument-wrapper').page();
  $(this).unwrap();
});

• http://jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-released/

New DOM cache management feature: On by default

Since animated page transitions require that the page you’re on and the one you’re transitioning to are both in the DOM, we add pages to the DOM as you navigate around. Until now, those pages would continue to stay in the DOM until you did a full page refresh so there was always a concern that we could hit a memory ceiling on some devices and cause the browser to slow down or even crash.

For Beta 2, we added a simple mechanism to keep the DOM tidy. It works like this: whenever a page is loaded in via Ajax, it is flagged for removal from the DOM once you navigate away to another page (technically, on pagehide). If you return to a deleted page, the browser may be able to retrieve the file from it’s cache, or it will re-request it from the sever if needed. In the case of nested lists, we remove all the pages that make up the nested list once you navigate to a page that’s not part of the list. Pages that are included in a multi-page setup won’t be affected by this feature at all – only pages brought in by Ajax are managed this way by jQuery Mobile.

A new page option called domCache controls whether to leave pages in the DOM as a way to cache them (the way things used to work) or keep the DOM clean and remove hidden pages (the new way). By default, domCache is set to false to keep the DOM size actively managed. If you set this to true, you need to take care to manage the DOM yourself and test thoroughly on a range of devices.

To set the domCache option on an individual pages in order to selectively cache a page, you can either add the data-dom-cache="true" attribute to the page container or set it programmatically like this:

elem.page({ domCache: true });

The domCache option can also be set globally. This is how to turn DOM caching back on so it works like it did originally:

$.mobile.page.prototype.options.domCache = true;

I've fixed that problem with this simple solution:

Add another parameter with a random number to your url like http://www.yourdomain.com/ws.php?opcion=1&**cache_hack=" +Math.random();**

The last parameter with a random makes "diferente" call and jquery mobile don't cache.-

Also add in your php script:

`header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
 header("Cache-Control: no-cache");
 header("Pragma: no-cache");`