Cửa sổ bật lên jQuery Mobile không mở trên .popup ('open')

Question

Tôi đang cố gắng sử dụng cửa sổ bật lên của jQuery Mobile 1.3.1 để cảnh báo người dùng khi thông tin đăng nhập sai. Tôi bắt đầu với một mẫu cơ bản từ tài liệu của jquerymobile, nhưng tôi không thể làm cho nó hoạt động với $('#popupBasic').popup('open'); Nếu tôi sử dụng nó theo cách này;

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

Nó hoạt động tốt khi tôi nhấp vào liên kết Chú giải công cụ. Nhưng trong trường hợp của tôi không có bất kỳ nhấp chuột vì vậy tôi đang cố gắng này;

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

này là sau khi chức năng đăng nhập ajax của tôi làm cho một callback, vì vậy retval là đúng nếu không có bất kỳ lỗi nào, false nếu có (và tại thời điểm đó tôi đang cố gắng để hiển thị cửa sổ bật lên). Bằng cách này, tất cả phần js của tôi là trong

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

vì vậy tôi đợi cho đến khi jquerymobile sẵn sàng cho trang.

gì xảy ra khi tôi làm điều này là trên các trình duyệt máy tính để bàn liên kết thay đổi như

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

nhưng không hiển thị các cửa sổ pop up. Sau khi một số làm mới và lưu trữ nó bắt đầu hiển thị. Trên iOS điều tương tự cũng xảy ra nhưng trên Android đôi khi nó thay đổi liên kết một thời gian nó không.

Tôi sẽ thực sự hạnh phúc nếu ai đó có thể giúp tôi giải quyết vấn đề này. Cảm ơn trước.

Answer 1

Đó là bởi vì khi pageinit được kích hoạt, poupup chưa sẵn sàng để thao tác. Bạn cần sử dụng pageshow để mở cửa sổ bật lên. Dưới đây là những gì bạn làm:

• Gọi ajax theo số pageinit. lưu trữ dữ liệu trong thuộc tính data của trang.
• Sau đó, trong sự kiện trang, hãy lấy nếu từ dữ liệu và thao tác theo cách bạn muốn, sau đó mở cửa sổ bật lên.

Dưới đây là các mã:

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

Và đây là một bản demo: http://jsfiddle.net/hungerpain/MvwBU/