पेज दिखाएं jQuery में अजाक्स कॉल पर स्पिनर लोड हो रहा है मोबाइल

Question

मैं अपने मोबाइल वेब ऐप में एक सूची पॉप्युलेट करने के लिए $ .ajax() का उपयोग कर रहा हूं। मैं क्या करना चाहता हूं कि jQuery मोबाइल लोडिंग स्पिनर दिखाई देता है जबकि यह कॉल निष्पादित हो जाने पर गायब हो जाती है और गायब हो जाती है। जेक्यूएम का वर्तमान संस्करण लोडिंग स्पिनर को क्रमशः दिखाने और छिपाने के लिए $.mobile.showPageLoadingMsg() और $.mobile.hidePageLoadingMsg() का उपयोग करता है। मैं सही परिणाम प्राप्त करने के लिए इन बयानों को कहां रखना है, यह नहीं समझ सकता। ऐसा लगता है कि यह पूरा करने के लिए एक काफी आसान बात होनी चाहिए, मैं बस इस सटीक परिदृश्य के बारे में कुछ भी नहीं ढूंढ पा रहा हूं।

यहाँ pagecreate समारोह अंदर ajax कॉल है:

$('#main').live('pagecreate', function(event) { 
     $.ajax({ 
      url: //url 
      dataType: 'json', 
      headers: //headers 
      success: function(data) { 
       for(i = 0; i < data.length; i++) { 
        $('#courses').append('<li>' + data[i].name + '<ul id="course' + data[i].id + '"></ul>' + '<span class="ui-li-count">' + data[i].evaluatedUserIds.length + '</span></li>'); 
        $('#course' + data[i].id).listview(); 
        for(j = 0; j < data[i].evaluatedUserIds.length; j++) { 
         $('#course' + data[i].id).append('<li><a href="">' + data[i].evaluatedUserIds[j] + '</a></li>'); 
        } 
        $('#course' + data[i].id).listview('refresh'); 
       } 
       $('#courses').listview('refresh'); 
      } 
     }); 
    }); 

Answer 1

कुछ लोगों ने कामकाज को समाप्त करने के बारे में पूछा है, इसलिए मैंने सोचा कि मैं इसे साझा करूंगा। यह विशेष रूप से सुरुचिपूर्ण या जटिल नहीं है, लेकिन ऐसा लगता है कि यह काम करता है। आधिकारिक 1.0 जारी होने के बाद से मैंने ढांचे का उपयोग नहीं किया है, इसलिए इसे अद्यतन में हल किया जा सकता है। अनिवार्य रूप से, मैं pageshow समारोह में $.mobile.showPageLoadingMsg() कॉल डाल दिया, लेकिन एक अगर खंड है कि केवल पहली बार पेज दिखाया गया है आग में लपेटा:

var mainloaded = false; 

$('#main').live('pageshow', function(event) { //Workaround to show page loading on initial page load 
    if(!mainloaded) { 
    $.mobile.showPageLoadingMsg(); 
    } 
}); 

$('#main').live('pagecreate', function(event) { 
    $.ajax({ 
     url: //url 
     dataType: //datatype, 
     headers: //headers 
     success: function(data) { 
      // 
      //...loading stuff 
      // 
      $.mobile.hidePageLoadingMsg(); 
      mainloaded = true; 
     } 
     // 
     //...handle error, etc. 
     // 
    }); 
}); 

Answer 2

आप क्या करना चाहिए $ .mobile.showPageLoadingMsg() सिर्फ ajax कॉल करने से पहले, और $ .mobile.hidePageLoadingMsg() में सफलता (या असफल) ब्लॉक इसलिए परिणाम आने के बाद यह दूर हो जाता है।

मैंने कभी भी jQuery मोबाइल का उपयोग नहीं किया है, लेकिन इसे नियमित ओएल 'कताई छवि को दिखाने/छिपाने के समान ही काम करना चाहिए।

Answer 3

आप $.mobile.showPageLoadingMsg और $.mobile.hidePageLoadingMsg कॉल करने के लिए $.ajax की beforeSend और complete घटनाओं का उपयोग कर सकते हैं। इस प्रकार दिखाई देगा:

$('#main').live('pagecreate', function(event) { 
     $.ajax({ 
      beforeSend: function() { $.mobile.showPageLoadingMsg(); }, //Show spinner 
      complete: function() { $.mobile.hidePageLoadingMsg() }, //Hide spinner 
      url: //url 
      dataType: 'json', 
      headers: //headers 
      success: function(data) { 
       //... 
      } 
     }); 
    }); 

Answer 4

यह थोड़ी देर हो चुकी है ... लेकिन आप की जरूरत है: AJAX कॉल करने से पहले

1. कॉल $.mobile.showPageLoadingMsg()।
2. AJAX कॉल करें। कॉल को असीमित रूप से भेजा जाना चाहिए (अपनी कॉल में async: true डालें)।
3. फ़ंक्शन में $.mobile.hidePageLoadingMsg() जोड़ें।

Answer 5

समस्या यहाँ है कि $ .ajax करने के लिए कॉल() घटना हैंडलर (कॉलर) के नियंत्रण प्रवाह के भीतर होता है।

setTimeout(function(){$.ajax(...)}, 1); 

फिर आप 'beforeSend' और 'पूरा उपयोग कर सकते हैं:

एक इस पर नियंत्रण प्रवाह से ajax अनुरोध दसगुणा बहुत आसान तरीका बताने के लिए setTimeout(), आप के लिए यह समारोह आह्वान इसलिए की तरह है '$ .ajax() की घटनाओं जैसा कि पहले बताया गया है और सुनिश्चित करें कि आपका स्पिनर दिख रहा है।

Answer 6

JQM 1.2 से पहले

:

$(document).ajaxStart(function() { 
    $.mobile.showPageLoadingMsg(); 
}); 

$(document).ajaxStop(function() { 
    $.mobile.hidePageLoadingMsg(); 
}); 

JQM 1 के बाद से।2:

$(document).ajaxStart(function() { 
    $.mobile.loading('show'); 
}); 

$(document).ajaxStop(function() { 
    $.mobile.loading('hide'); 
}); 

http://api.jquerymobile.com/page-loading/

Answer 7

$(document).ajaxSend(function() { 
    $.mobile.loading('show'); 
}); 
$(document).ajaxComplete(function() { 
    $.mobile.loading('hide'); 
}); 

Answer 8

या, सबसे आसान तरीका चिंता का जुदाई के रूप में विश्व स्तर पर यह डाल करने के लिए है -

अपने गुरु/लेआउट दृश्य में कोड नीचे रखो

<script type="text/javascript"> 

    $(document).bind('mobileinit', function() { 
     //Loader settings 
     $.mobile.loader.prototype.options.text = "Loading.."; 
     $.mobile.loader.prototype.options.textVisible = true; 
     $.mobile.loader.prototype.options.theme = "b"; 
     $.mobile.loader.prototype.options.textonly = false; 
    }); 

    $(document).on({ 
     ajaxSend: function() { $.mobile.showPageLoadingMsg(); }, 
     ajaxStart: function() { $.mobile.showPageLoadingMsg(); }, 
     ajaxStop: function() { $.mobile.hidePageLoadingMsg(); }, 
     ajaxError: function() { $.mobile.hidePageLoadingMsg(); } 
    }); 

</script> 

संपादित करें: यदि आप हैं तो कृपया इसका उपयोग करें जेक्यूएम (> 1.2) के नवीनतम संस्करण को लक्षित करना:

• $ .mobile.loading ('show');
• $ .mobile.loading ('छुपाएं');