Question

I am using jquery mobile. I would like to navigate from one page to another and force an ajax call. Right now if I navigate for the first time it will store the pages in the DOM. Then the next time you go to that sub page it uses what is in the DOM rather than ajaxing it in again. If I put the following on the links to the other pages then it works on the desktop, but it does not work on the mobile device since the mobile device does not have a “click”.

<a href="page2.php" data-ajax="true" onclick="$(document.getElementById($(this).attr('href'))).remove();" >link</a>

I tried to put this functionality into the head of the document within a jquery function like this with the idea of changing the “click” to “tap” as described in the documentation.

$('a').live('click', function() {
  var $this = $(this);
  if ( !$this.attr('rel') || $this.attr('rel') != 'external' )
  $(document.getElementById( $this.attr('href') )).remove();
});

But this will remove the page after it goes to it.

What I need it to do is remove the page, then load it again. I found in the documentation that the event pagebeforechange but I have not found how or if this would work.

What is the best way to transition from one page to another and force the ajax loading of the page even if the page has been previously view?

Answer 1

How bout this:

button:

<a id="button">link</a>

JQuery

$(document).on('vclick', '#button', function(){
    $.mobile.changePage( "page2.php", { reloadPage: true } );
});

Update: Changed to a better answer.
Update: Added more for clarity.