2013-04-22 2 views
4

Как закрыть страницу диалога в jQuery Mobile?jQuery Mobile close page dialog

В моем конкретном случае я вызываю другую страницу как загрузку страницы, а затем, после завершения процесса, я хочу, чтобы страница загрузки 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" 
    }); 
} 

Как отобразить эти данные в JQuery мобильного диалога, когда мои данные успешно принимаются -> оповещения (ALLDATA)?

+0

Используйте '$ (".Селекторный") .dialog ("закрыть");' – Omar

+0

@Omar, что селектор? я вызываю страницу (load.html) –

+0

@BerthoJoris селектор может быть любым элементом DOM на странице. –

ответ

6

После загрузки loading.html с помощью $.mobile.changePage('loading.html', { role: 'dialog'});, JQuery Mobile будет дать ему data-role=dialog. Вы можете закрыть его, используя ниже.

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

Это будет закрывать окно, на самом деле любой открытый диалог, даже если он не имеет id.

.selector средства, #id, класс .class, data-role=something ... и т.д.

+0

работает ли после того, как jqm обновил свою модель диалога? Теперь любая страница может выступать в качестве диалога. –

+0

@IftikarUrrhmanKhan for 1.4 использовать '$ .mobile.pageContainer.pagecontainer (" change "," id страницы или URL ")' или '$, mobile.back()'. – Omar

1

Вы также можете вызвать метод диалога close() для программного закрытия диалогов.

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

    }); 
}); 

DEMO

+0

Что делать, если диалог был автоматически закрыт? Без кнопки закрытия следует нажать. В моем случае диалоговое окно появится при запуске процесса ajax и будет автоматически закрыто при завершении процесса ajax. –

+0

@Mahesh My Dialog находится на отдельной странице html. Это решение не работает в моем случае. Так как это можно сделать в моем случае ???? –