Scott W. Bradley

in which scottwb thinks out loud

Fork me on GitHub

Reload the Same Page Without Blinking on jQuery Mobile

| Comments

When using jQuery Mobile, if you try to reload the current page from javascript using the usual tactics of assigning window.location.href, you might notice some unsightly artifacts and page blinking. This is particularly noticeable on iOS Mobile Safari (mainly on iPhone), because the reload also causes the address bar to slide down and back up.

Below is function I made to refresh the current page successfully with no visible artifacts: no blinking, no address bar showing, transitions:

1
2
3
4
5
6
7
8
9
10
11
function refreshPage() {
  $.mobile.changePage(
    window.location.href,
    {
      allowSamePageTransition : true,
      transition              : 'none',
      showLoadMsg             : false,
      reloadPage              : true
    }
  );
}

This was done on jQuery Mobile 1.1.0.

Comments