Silent page reload in jQuery Mobile

jQuery Mobile silent page reload

Last day worked on a jQuery mobile project and faced an interesting issue about silent page reload. You know, we can use JavaScript page reloading techniques and they are quiet simple and easy to implement. But when you reload a complete page then a blink effect appear in your screen, which seems very annoying to user, also application loose it’s attraction. More over, jQuery mobile saves all pages in DOM. So, if you reload full page then it’s looses all page information also degrade application performance.

– What’s the solution?

It’s a very simple jQuery tricks to implement silent page reload. Here goes silent page reload snippet.

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

Save this small function in your JavaScript file or your page and just call “refreshPage()” function and you are done.

Enjoy!

Share It

Related Posts