jQuery mobile popup on pageinit

Question

I want a popup to open as soon as the page loads but seem to be getting stuck with the spinning wheel.

Here is a fiddler to demonstrate the problem any help would be appreciated.

http://jsfiddle.net/Ohpyx/UGfXG/

The code I'm using is:

$(document).live('pageinit',function(event){
    $('#popupBasic').popup('open');
})​

Answer 1

This worked for me:

$(document).on('pageinit', '.ui-page',function(event){
    setTimeout(function () {
        $('#popupBasic').popup('open');
    }, 0);//Note the comment below from @Taifun.
})​

You had a race condition and this places the popup code at the end of the queue.

Here is a demo: http://jsfiddle.net/UGfXG/6/

Note: I replaced .live() with .on() (the delegated flavor) as the former has been depreciated as of jQuery 1.7.

Answer 2

The .popup('open') needs the $.mobile.activePage, which is set after the pageinit event. The pagechange event seems to be better for popups.

This worked for me :

$(document).on('pagechange',function(event){
    $('#popupBasic').popup('open');
})​

If you want it just at the first load, use .one :

$(document).one('pagechange',function(event){
    $('#popupBasic').popup('open');
})​

See https://github.com/jquery/jquery-mobile/issues/3384