JQuery Mobile 1.3.1 "$ .mobile.loading" không làm việc

Question

Tôi có đoạn mã sau:

HTML:

<link rel="stylesheet" href="js/jquery.mobile-1.3.1.min.css"/> 
<script src="js/jquery-1.9.1.min.js"></script> 
<script src="js/jquery.mobile-1.3.1.min.js"></script> 

JS:

$(document).on({ 
    ajaxStart: function() { 
    $.mobile.loading('show'); 
    console.log('getJSON starts...'); 
    }, 
    ajaxStop: function() { 
    $.mobile.loading('hide'); 
    console.log('getJSON ends...'); 
    }  
}); 

tôi đang sử dụng Jquery Mobile 1.3.1 và thử nghiệm mã này trong mozilla firefox và google chrome tại thời điểm này. Tôi sẽ sử dụng nó trong một ứng dụng phonegap sau này.

Tôi đang tải JSON và hiển thị nó trên màn hình trong chế độ xem danh sách. Trong khi nó tải, tôi muốn chương trình để hiển thị một "tải spinner". Nhật ký bảng điều khiển cho thấy ajaxStart đang kích hoạt nhưng không có spinner trực quan ở bất kỳ đâu trên màn hình.

Tôi đang làm gì sai? Hãy giúp tôi!

Xin cảm ơn trước.

Answer 1

gì tài liệu jQuery Mobile đang thiếu thông tin liên quan đến thực hiện thành công:

$.mobile.loading('show'); 

và

$.mobile.loading('hide'); 

Họ sẽ hiển thị CHỈ trong sự kiện pageshow. Trong bất kỳ trường hợp khác mà bạn cần phải bọc chúng vào setinterval, như thế này:

Trong trường hợp bạn không biết gì về pageshow và phần còn lại của sự kiện trang jQuery Mobile hãy nhìn vào này ARTICLE, đó là blog cá nhân của tôi. Hoặc tìm thấy nó HERE.

Trước tiên, bạn sẽ không thể hiển thị/ẩn AJAX bộ nạp không có khoảng thời gian đã đặt. Chỉ có một tình huống mà điều này là có thể nếu không có và đó là trong sự kiện pageshow. Trong bất kỳ trường hợp nào khác, cần có setinterval để bắt đầu trình tải.

Dưới đây là một ví dụ làm việc: http://jsfiddle.net/Gajotres/Zr7Gf/

var interval = setInterval(function(){ 
     $.mobile.loading('show'); 
     clearInterval(interval); 
    },1);  

    var interval = setInterval(function(){ 
     $.mobile.loading('hide'); 
     clearInterval(interval); 
    },1);  

Answer 2

gói nó trong setTimeout công trình.Tôi chỉ có một chức năng đơn giản để làm điều đó:

function loading(showOrHide) { 
    setTimeout(function(){ 
     $.mobile.loading(showOrHide); 
    }, 1); 
} 

Sau đó chỉ cần gọi nó khi bạn muốn hiển thị hoặc ẩn các spinner:

loading('show'); 

hoặc

loading('hide'); 

Dưới đây là một jsfiddle ngớ ngẩn : http://jsfiddle.net/7UpW5/

Answer 3

mã cho các câu trả lời khác không hoạt động cho tôi và chưa hoàn thành (ví dụ: nếu bạn muốn tham số vượt qua cuối cùng hoặc , chỉ cần sử dụng boolean true/false để chuyển đổi. Sau đây cung cấp một cách tốt đẹp để làm điều này:

/** workaround: $.mobile.loading not working correctly: http://stackoverflow.com/a/17725350 */ 
function showLoading(on, params) { // on: true|false 
    setTimeout(function() { 
     if (on) 
     $.mobile.loading("show", params); 
     else { 
     //$.mobile.loading("hide"); // does not seem to work (e.g. using with GWT and jQM 1.4.3) 
     $('.ui-loader').remove(); // removes the loader div from the body 
     }  
    }, 1); 
} 

sử dụng nó như thế này:

showLoading(true); // show loader 
showLoading(false); // hide loader 

Answer 4

Bên trong AJAX gọi? (Nhưng sẽ làm việc bất cứ nơi nào)

$.ajax({ url: ..., 
    type:'post', dataType:'json', 
    data:{ d: ... }, 
    beforeSend: function() { fSpinner('show'); }, 
    complete: function(){ fSpinner('hide'); }, 
    success: function(res){...}, 
    error: function(e){ alert('Error: ' + e.responseText) } 
}); 

Và chức năng chính:

function fSpinner(strShowOrHide) { 
    setTimeout(function(){ 
     $.mobile.loading(strShowOrHide); 
    }, 1); 
}