jQuery mobile refresh button

Question

I am having problems when I add new content to the database the pages are not updated. So I was thinking of adding a refresh button.

Hope can I do this please?

Answer 1

The problem you are having has to do with how jQuery Mobile caches pages. And location.reload(true) Will Not Work as the URL will have a hash string.

Reason:

In order to emulate native mobile transitions jQuery Mobile performs a Ajax request and inserts the <div data-role="page"> element inside the first page, essentially creating a single page site from a muti-page one (with navigation, bookmarking built into it).

solution:

However the team has lacked a little foresight into how to deal with time dependent content. I personally have fixed the issue by adding a attribute to my links that I want to get a fresh copy.

$('body').delegate('a[data-cache=false]', 'click', function() {
    var $this = $(this);
    
    $('[data-url="' + $this.attr('href') + '"]' ).remove();
    
});

This listens to a click event (tap, whatever), removes the cached div and lets jQuery request a fresh copy.

Note:

There are over solutions to this such a data-ajax="false" and rel="extenal" however these will stop the navigation system to functionality to function to it's full extent. Also the jQuery team is aware of the issues surrounding this and are currently working of a full navigation rewrite. http://jquerymobile.com/blog/2011/05/13/jquery-mobile-team-update-week-of-may-9th/.

Answer 2

You don't need jQuery to refresh the page. You just need to call location.reload(true).

By setting the first (and only) argument to true we force a refresh from the server, and not just reload the page from the cache.