popup init

by Krishna Gopinath

HTML

<div data-role="page" id="page1">
    <div data-role="header">
         <h1>jQuery Mobile Example</h1>

    </div>
    <div data-role="content">
        <div data-role="popup" id="popupBasic" data-overlay-theme="a">
            <div data-role="header">
                 <h3>Popup</h3>

            </div>
            <div data-role="content">
                <p>This is a completely basic popup, no options set.</p>
            </div>
        </div>
    </div>
</div>

JavaScript

$(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");