JQuery मोबाइल 1.3.1 "$ .mobile.loading" काम नहीं कर

Question

मैं निम्नलिखित कोड है:

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> 

जे एस:

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

मैं मैं jquery मोबाइल 1.3.1 का उपयोग कर रहा हूं और इस समय मोज़िला फ़ायरफ़ॉक्स और Google क्रोम में इस कोड का परीक्षण कर रहा हूं। मैं इसे बाद में फोनगैप ऐप में इस्तेमाल करने जा रहा हूं।

मैं एक JSON लोड कर रहा हूं और इसे एक सूचीदृश्य में स्क्रीन पर प्रदर्शित कर रहा हूं। हालांकि यह लोड होता है, मैं चाहता हूं कि कार्यक्रम "लोडिंग स्पिनर" दिखाए। कंसोल लॉग से पता चलता है कि AJAXStart फायरिंग है लेकिन स्क्रीन पर कहीं भी कोई दृश्य स्पिनर नहीं है।

मैं क्या गलत कर रहा हूं? कृपया सहायता कीजिए!

अग्रिम धन्यवाद।

Answer 1

क्या jQuery मोबाइल प्रलेखन के सफल निष्पादन के बारे में जानकारी की कमी है:

$.mobile.loading('show'); 

और

$.mobile.loading('hide'); 

वे pageshow घटना के दौरान केवल दिखाएगा। किसी भी अन्य मामले में आप उन्हें setinterval में रैप करने के लिए, इस तरह की जरूरत है:

मामले में आप के बारे में pageshow और jQuery मोबाइल पेज घटनाओं के बाकी कुछ नहीं पता इस ARTICLE पर एक नज़र डालें, यह मेरा निजी ब्लॉग है। या इसे HERE खोजें।

सबसे पहले, आप AJAX लोड अंतराल के बिना लोडर को दिखाने/छिपाने में सक्षम नहीं होंगे। केवल एक ही स्थिति है जहां यह संभव है और यह pageshow ईवेंट के दौरान संभव है। किसी अन्य मामले में setinterval लोडर को शुरू करने के लिए आवश्यक है। 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

setTimeout कार्यों में यह रैपिंग:

यहाँ एक काम कर उदाहरण है।मैं सिर्फ यह करने के लिए एक सरल कार्य है:

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

तो बस इसे कहते है जब आप को दिखाने या स्पिनर छुपाना चाहते हैं:

loading('show'); 

या

loading('hide'); 

यहां एक मूर्खतापूर्ण jsfiddle है : http://jsfiddle.net/7UpW5/

Answer 3

के लिए कोड अन्य उत्तरों के लिए काम नहीं किया मुझे और पूरा नहीं हुआ है (उदा। यदि आप पास पैरामीटर अंततः या करना चाहते हैं तो टॉगलिंग के लिए बस बूलियन true/false का उपयोग करें।

/** 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); 
} 

इस तरह इसका इस्तेमाल:

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

Answer 4

AJAX के अंदर फोन निम्नलिखित यह करने के लिए एक अच्छा तरीका प्रदान करता है? (लेकिन कहीं भी काम करेंगे)

$.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) } 
}); 

और समारोह में ही:

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