CODEWITHSUNDEEP
jqueryjquery-mobile
Andreas
Andreas

Reputation: 193

Refresh page on button click in jquery mobile

I'm using below code to refresh the page. However when moving the button to the header it dosent work any longer. So button needs to be in content section to work. I guess it has something to do with .mobile.changePage

function refreshPage() {
 $.mobile.changePage(
 window.location.href,
 {
  allowSamePageTransition : true,
  transition              : 'none',
  showLoadMsg             : false,
  reloadPage              : true
 }
 );
}

$(window).load(function(){
 $('#refresh').on('click', function (e) {
    refreshPage();
 });
})

I'm calling the button using below code:

<div data-role="header">
    <button id="refresh" data-icon="refresh">Refresh</button>   
</div>

Upvotes: 0

Views: 973

Answers (1)

ezanker
ezanker

Reputation: 24738

You can use the pagecontainer widget to get the active page and then refresh it with the change method:

function refreshPage() {
  var curPageID = $( ":mobile-pagecontainer" ).pagecontainer( "getActivePage" ).prop("id");
  $( ":mobile-pagecontainer" ).pagecontainer( "change", "#" + curPageID, { 
    allowSamePageTransition : true,
  });
}

Also instead of $(window).load(function(){... use the jQM pagecreate event

$(document).on("pagecreate","#page2", function(){ 
   $('#refresh').on('click', function (e) {
      refreshPage();
   });
});

DEMO

In the demo, navigate to page 2 and then click refresh.

Upvotes: 1

Related Questions