jQuery Mobile popup is not opening on .popup('open')

Question

I am trying to use jQuery Mobile 1.3.1's popup to warn the user when login credentials are false. I started with a basic template from jquerymobile's documentation, but I couldn't make it work with $('#popupBasic').popup('open'); If I use it this way;

     <div data-role="page">


        <div data-role="header" data-tap-toggle="false">
        </div><!-- /header -->

        <div data-role="content">

            <a href="#popupBasic" data-rel="popup">Tooltip</a>
            <div data-role="popup" id="popupBasic">I will change this text dynamically if this popup works</div>


        </div><!-- /content -->
    </div><!-- /page -->

It works well when I click on the Tooltip link. But in my case there isn't any click so I am trying this;

                if(retVal){
                    $.mobile.changePage('index');
                }
                else{                    
                    $('#popupBasic').popup();
                    $('#popupBasic').popup("open");
                }

this is after my ajax login function makes a callback, so retVal is true if there isn't any errors, false if there is (and at that point I am trying to show popup). By the way all my js part is in

 $(document).on('pageinit', function(){});

so i wait till jquerymobile is ready for the page.

What happens when I do this is on desktop browsers link changes as

http://localhost/login#&ui-state=dialog

but doesn't show the pop up. After some refreshes and caches it starts to show. On iOS same thing also happens but on android sometimes it changes link some time it doesn't.

I would be really happy if someone can help me to solve this problem. Thanks in advance.

Answer 1

That's because when pageinit is fired, the poupup isnt ready for manipulation just yet. You need to use pageshow to get the popup to open. Here's what you do :

• Make the ajax call in pageinit. store the data in data attribute of the page.
• Then, in the pageshow event, take if from data and manipulate it the way you want, then open the popup.

Here's the code :

$(document).on({
    "pageinit": function () {
        alert("pageinit");
        //$("#popupBasic").popup('open'); will throw error here because the page is not ready yet
        //simulate ajax call here
        //data recieved from ajax - might be an array, anything
        var a = Math.random();
        //use this to transfer data betwene events
        $(this).data("fromAjax", a);
    },
    //open popup here
    "pageshow": function () {
        alert("pageshow");
        //using stored data in popup
        $("#popupBasic p").html("Random : " + $(this).data("fromAjax"));
        //open popup
        $("#popupBasic").popup('open');
    }
}, "#page1");

And here's a demo : http://jsfiddle.net/hungerpain/MvwBU/