jQuery Mobile关闭页面对话框。

Question

如何在jQuery Mobile中关闭对话框页面？

在我的特定情况下，当调用另一个页面作为页面加载时，然后在处理完成后，我希望关闭ajax页面加载并再次显示具有包含所有接收到的回调ajax数据的对话框页面。

我的代码：

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

对于调用页面的加载：

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

当我的数据成功接受 -> alert(AllData), 我该如何将数据显示在jQuery移动对话框中？

- Bertho Joris

---

使用 $( ".selector" ).dialog( "close" );。 - Omar

@Omar，什么选择器？我调用了一个页面（loading.html）。 - Bertho Joris

@BerthoJoris 选择器可以是页面上的任何DOM元素。 - msapkal

Answer 1

当你使用$.mobile.changePage('loading.html', { role: 'dialog'});加载loading.html时，jQuery Mobile会给它一个data-role=dialog。你可以使用以下方法关闭它。

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

这将关闭对话框，实际上是任何已打开的对话框，即使它没有id。

.selector 意味着 #id、类名 .class、data-role=something 等等。

- Omar

---

JQM更新了对话框模型后，它是否能正常工作？现在任何页面都可以充当对话框。 - Iftikar Urrhman Khan

@IftikarUrrhmanKhan 对于1.4版本，请使用$.mobile.pageContainer.pagecontainer("change", "页面ID或URL") 或者 $.mobile.back()。 - Omar

Answer 2

您也可以调用对话框的 close() 方法来编程关闭对话框。

$(document).bind('pageinit', function() {
    $("#bar").on('pagebeforeshow', function() {
        $("#btnClose").bind('click', function() {
            //alert('test');
            $("#bar").dialog('close');
        });

    });
});

DEMO

- msapkal

---

如果对话框自动关闭了怎么办？？无需点击关闭按钮。在我的情况下，当ajax进程开始时，对话框将出现，并在ajax进程完成时自动关闭。 - Bertho Joris

@Mahesh，我的对话框在单独的HTML页面上。这个解决方案在我的情况下不起作用。那么我该怎么做才能在我的情况下实现呢？？？ - Pankaj Jawale