4

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');
})​
user1886891
  • 43
  • 1
  • 3

2 Answers2

6

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.

Jasper
  • 75,717
  • 14
  • 151
  • 146
  • you should set the timeout > 0 to get this running, see also http://stackoverflow.com/a/13240507/1545993... – Taifun Dec 08 '12 at 00:38
  • 1
    @Taifun I tested in Chrome and Android browsers which worked fine, so thanks for the catch on other browsers. Firefox didn't work for me, but when I changed the delay to `100ms`, it worked. – Jasper Dec 08 '12 at 01:01
  • Ah, this is fantastic thanks folks. I read in the documentation about using timeouts with chaining but the reasoning didn't grasp with me. Now I am beginning to understand and will probably spend my evening googling into this more. Thanks! – user1886891 Dec 08 '12 at 07:22
0

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

Guillaume L.
  • 1