2013-07-09 22 views
5

Próbuję użyć popup popup jQuery Mobile 1.3.1, aby ostrzec użytkownika, gdy dane logowania są fałszywe. Zacząłem od podstawowego szablonu z dokumentacji jquerymobile, ale nie mogłem pracować z $('#popupBasic').popup('open'); Jeśli używam go w ten sposób;jQuery Mobile popup nie otwiera się na .popup ('open')

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

Działa dobrze, gdy kliknę link Narzędzie. Ale w moim przypadku nie ma żadnego kliknięcia, więc próbuję tego;

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

to po moim ajax funkcja logowania czyni wywołania zwrotnego, tak retval jest prawdą, jeśli nie ma żadnych błędów, jeśli jest fałszywe (iw tym momencie staram się pokazać okienko). Przy okazji, cała moja część js jest w więc czekam, aż jquerymobile jest gotowy do strony.

Co się dzieje, gdy robię to w przeglądarkach pulpitu odwołuje zmiany jako

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

ale nie pokazuje pop-up. Po kilku odświeżeniach i buforach zaczyna się pokazywać. W systemie iOS dzieje się tak samo, ale na Androida czasami zmienia link, ale nie.

Byłbym bardzo szczęśliwy, gdyby ktoś pomógł mi rozwiązać ten problem. Z góry dzięki.

Odpowiedz

9

To dlatego, że po zwolnieniu pageinit, poupup nie jest jeszcze gotowy do manipulacji. Aby otworzyć wyskakujące okienko, musisz użyć numeru pageshow. Oto co możesz zrobić:

  • Wykonaj wywołanie ajax w pageinit. przechowaj dane w atrybucie strony o numerze data.
  • Następnie, w zdarzeniu przeglądania stron, weź z danych i manipuluj nimi tak, jak chcesz, a następnie otwórz popup.

Oto kod:

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

A oto demo: http://jsfiddle.net/hungerpain/MvwBU/