Question

In a jQuery Mobile application, I’m using Ajax to load a page with dynamic content. Now, I want to add a “reload” button to that page.

Consider index.html:

<div data-role="page" id="home">
  <div data-role="header"><h1>Home</h1></div>
  <div data-role="content"><a href="time.php">Time</a></div>
</div>

And time.php:

<div data-role="page" data-add-back-btn="true" id="time">
  <div data-role="header"><h1>Time</h1></div>
  <div data-role="content">
     <p><?= date(DATE_RFC822)?></p>
     <a href="#" data-role="button" data-icon="refresh">Reload</a>
  </div>
</div>

I can now navigate back and forth between the “home” and “time” pages, and the time will be updated when arriving on the “time” page, but I would like the “Reload” button to reload the “time” page. That is: it should do an Ajax request for time.php, and recreate the “time” page from the response (and meanwhile show the “page loading” indicator).

How can I do that?

Answer 1

After looking at the code of changePage and loadPage I came up with a simpler solution:

$('.reload').live('click', function(e) {
  $.mobile.changePage($.mobile.activePage.jqmData('url'), {
    reloadPage: true,
    changeHash: false,
    transition: 'none'
  });
  e.preventDefault();
});

Note that JQM will still transition between the old version of the page and the new version; it is best not to use a transition that has a stronge sense of direction (like ‘slide’).

The preventDefault does not seem strictly necessary, but I added it for good measure.