I am trying to open a dialog with JQM as soon as the page is loaded. However calling changePage with data-role='dialog' too soon results in the dialog being shown and immediately closed. When data-role='page' this does not occur. Using a setTimeout method can work but requires large delays to ensure functionality across mobile devices/browsers.
$.mobile.changePage("#login",{role:'page'});
when role=page it stays open
$.mobile.changePage("#login",{role:'dialog'});
when role=dialog the dialog briefly flashes and then closes
setTimeout(function(){$.mobile.changePage("#login",{role:'dialog'});},2000);
usually works with long delay but undesirable
Please see demo: http://jsbin.com/eredac/2
Note: Issue not present in Firefox
UPDATE: Maybe it could also be resolved by doing the following:
Set autoInitializePage to false, get the url hash, set the active page to the dialog (default, first page), manually initialize, when the dialog is finished call changePage with the url hash as the destination?
Something like this:
But dialog is shown without transition animation. I prefer the other way but a >1s delay is not acceptable. So if there is no way to trigger at the correct time I may settle for this. Maybe try to at least fade in the dialog? (EDIT: Added the fade in. Moderately satisfied with that result.)