jQuery Mobile close page dialog

Question

How do I close the dialog page in jQuery Mobile?

In my particular case, I call another page as the page loading and then after the process is finished I want to ajax page loading closed and appeared again with a dialog page contains all the data received callback ajax.

My code :

$("#login").click(function(e){
LoadingPanel();
e.preventDefault();
     $.ajax({
        url:'http://www.myurl.com/soap/login.php',
        dataType:'jsonp',
        timeout: 15000,
        cache: false,
        data: dataString,
        success:function(response){

            //Dialog page closed here

            for(var i=0; i<response.length; i++){
                    var str,str2,str3,str4,str5,str6,str7 = "";
                    str     = response[i].NE;
                    str2    = response[i].EMAIL;
                    str3    = response[i].TIPE;
                    str4    = response[i].NAMA;
                    str5    = response[i].TELP;
                    str6    = response[i].DN;
                    str7    = response[i].DESC_LOGIN;


                if(str=='-'){
                    alert('Data does not match')
                }else{
                var AllData = ""
                    AllData = 'Data1 : '+str+'\nData2 : '+str2+'\nData3 : '+str3+'\nData4 : '+str4+'\nData5 : '+str5
                    alert(AllData);
                    //How do I display this data into jquery mobile dialog?
                    } 
                }

            },
            error: function (xhr, ajaxOptions, thrownError) {
                if(thrownError==="timeout") {
                    alert("Cant connect");
                } else {
                    alert(t);
                }
            }
    });
  });

To the calling page loading :

function LoadingPanel(){
    $.mobile.changePage( "loading.html", { 
       role: "dialog" 
    });
}

How do I display this data into jquery mobile dialog when my data successfully accepted -> alert(AllData) ?

Answer 1

Once you load loading.html using $.mobile.changePage('loading.html', { role: 'dialog'});, jQuery Mobile will give it a data-role=dialog. You can close it using the below.

$('[data-role=dialog]').dialog( "close" );

This will close the dialog, actually any open dialog, even if it doesn't have an id.

.selector means, #id, class .class, data-role=something...etc