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

I used "pagecreate" and that seems to solve my problem (so far...)

$(document).on('pagecreate', "#page-formyID", function () {

//whatever

});

Answer 2

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

Answer 3

Most probably is that on first page, that event is already fired when your piece of code is executed. Which explains why you get nothing only on the first page.

About your second point, it's normal since, changePage will "change" the page to the dialog, and once you close the dialog, it will return to your previous page. Thus, the if is executed 2 times.

My suggestion is that for the first time you enter the first page, you can re-transition to the same page just after you register the callback for the pageshow event.