jQuery Mobile Dialog on page load

Question

Working on my first jQuery Mobile app. There is a localStorage value that must have a value throughout the application, so I tapped into the pageshow event to check this val

Answer 1

Set a time interval to show the dialog, rather than call it once the page is shown.

$(document).on('pageshow', '#myPage' ,function () {
 if (getValue() == null) {
  setTimeout(function () {
   $.mobile.changePage('#dialog');
  }, 100); // delay above zero
 }
});

This way, the dialog will popup on pageshow event and only once.

update

I found this interesting jQueryMobile events diagram on this blog. It explains why a dialog or a popup is fired twice on the first page and not on the rest of the pages in case of multi-pages structure. It seems it fires once the page is ready into DOM and again when on pageshow. Setting a timeout prevents the dialog from firing on pageinit, and therefore skips that event until pageshow is triggered.

Image / diagram source: http://bradbroulik.blogspot.co.nz/2011/12/jquery-mobile-events-diagram.html