jQuery Mobile popup non si apre su .popup ('aperto')

Question

Sto tentando di utilizzare il popup di jQuery Mobile 1.3.1 per avvisare l'utente quando le credenziali di accesso sono false. Ho iniziato con un modello di base dalla documentazione di jquerymobile, ma non ho potuto farlo funzionare con $('#popupBasic').popup('open'); Se lo uso in questo modo;

 <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 --> 

Funziona bene quando faccio clic sul collegamento Tooltip. Ma nel mio caso non c'è alcun clic quindi sto provando questo;

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

questo è, dopo la mia funzione di login ajax fa un callback, quindi retVal è vero se non c'è eventuali errori, false se non v'è (e, a quel punto che sto cercando di mostrare pop-up). Tra l'altro tutta la mia parte js è in

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

quindi aspetto che jquerymobile sia pronto per la pagina.

Cosa succede quando faccio questo è il browser desktop dei collegamenti cambia come

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

ma non mostra il pop up. Dopo alcuni aggiornamenti e cache inizia a mostrare. Su iOS succede anche la stessa cosa ma su Android a volte cambia collegamento qualche volta no.

Sarei davvero felice se qualcuno mi può aiutare a risolvere questo problema. Grazie in anticipo.

Answer 1

Ecco perché quando viene attivato pageinit, il poupup non è ancora pronto per la manipolazione. È necessario utilizzare pageshow per aprire il popup. Ecco cosa fai:

• Effettuare la chiamata ajax in pageinit. memorizzare i dati nell'attributo data della pagina.
• Quindi, nell'evento pageshow, prendere se dai dati e manipolarlo nel modo desiderato, quindi aprire il popup.

Ecco il codice:

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

Ed ecco una demo: http://jsfiddle.net/hungerpain/MvwBU/