How does one disable Caching in jQuery Mobile UI

Question

Tried...

<div data-role="page" data-cache="30"> 
<div data-role="page" data-cache="never">
<div data-role="page" data-cache="false"> 
<div data-role="page" cache="false">

Nothing seemes to work... so at the moment I'm fixing the problem on the server-side via...

.'?x='.rand()
.'&x='.rand()

I don't want to disable the AJAX just the caching. There has to be a better way though... am I missing something?

Thanks,

Serhiy

Solution 1

Thank you for the answers guys, and even though they didn't quite work for me they did point me in the direction to find the code I was looking for.

This is the code that I found on this gentleman's Github Gist.

https://gist.github.com/921920

jQuery('div').live('pagehide', function(event, ui){
  var page = jQuery(event.target);

  if(page.attr('data-cache') == 'never'){
    page.remove();
  };
});

There is also a back button code in that Gist, but I don't seem to need it really as my back button seems to work just fine...

Solution 2

Have you tried to overwrite the default value ?

$(document).bind("mobileinit", function(){
    $.mobile.page.prototype.options.domCache = false;
});

This works for me

Solution 3

Page caching is now off by default in jQM RC1. See the extract below from the jQM website about page caching: http://jquerymobile.com/demos/1.0rc1/docs/pages/page-cache.html

If you prefer, you can tell jQuery Mobile to keep previously-visited pages in the DOM instead of removing them. This lets you cache pages so that they're available instantly if the user returns to them.

To keep all previously-visited pages in the DOM, set the domCache option on the page plugin to true, like this:

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

Alternatively, to cache just a particular page, you can add the data-dom-cache="true" attribute to the page's container:

<div data-role="page" id="cacheMe" data-dom-cache="true">

You can also cache a page programmatically like this:

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.

Solution 4

Method 1

This disables AJAX

Read http://jquerymobile.com/demos/1.0a2/#docs/api/globalconfig.html

Set ajaxLinksEnabled to false and it will not load and cache those pages, just work as normal links.

Method 2

Second idea is to remove cached elements. You can bind to pagehide event and make it remove the page instead. If not present in DOM, the page will be loaded again.

It can be done with this code as a proof of concept:

$('.ui-page').live('pagehide',function(){ $(this).remove(); });

But it needs a little work. The above code breaks the history. It prooves that you will only be able to use it with pages you intend to be leaves in your sitemap tree. Therefore you have to create a special selector for them or bind it to only certain pages.

Also you can bind to a button's click or mousedown event, get its href, generate page id out of it and find the div by id to remove it before jqm tries to look for it.

I have found no advised way of disabling the cache or forcing loading.

Solution 5

Martin's answer should be the right one in my opinion but jQuery Mobile cache the first page no matter what. https://github.com/jquery/jquery-mobile/issues/3249

I've opted to "patch" the behaviour of $.mobile.page.prototype.options.domCache = false and data-dom-cache="true"

$(document).on('pagehide', function (e) {
    var page = $(e.target);
    if (!$.mobile.page.prototype.options.domCache
        && (!page.attr('data-dom-cache')
            || page.attr('data-dom-cache') == "false")
        ) {
        page.remove();
    }
});

View more solutions

Comments

[Serhiy]

thanks but I'm not having any luck with this method either... what version was this for... alpha or beta...?

[John B]

FYI, DOM caching is off, but I think that there is still some other type of caching occurring that causes problems with dynamic web apps. I'm on the 1.0 release and I am seeing caching issues with my app. The accepted answer that forcefully removes the pages from the cache seems to alleviate the problems.

[Misery]

Just a quick note, as of jQuery 1.7 the .live() method is deprecated in favor of .on(). So an updated example would be jQuery(document).on('pagehide', 'div', function(event, ui) { ... });

[KCD]

This may be the explanation - "jQuery Mobile always caches the first page" forum.jquery.com

[cherouvim]

Also becareful because this also removes parents of dialogs, breaking the interface. You need something like: if (ui.nextPage && ui.nextPage[0] && $(ui.nextPage[0]).is('.ui-dialog')) return; between lines 1 and 2.

[Edyn]

Two other things to consider: 1) the browser can still cache the page, I had to prevent that as well to get this to work. 2) You can change page.attr('data-cache') to page.data('cache') to allow for dynamic caching decisions.