एक लोडिंग बार jQuery का उपयोग करते समय एक AJAX अनुरोध

Question

मैं की तरह jQuery के साथ एक AJAX अनुरोध कर रहा हूँ बनाने दिखाएँ (जो सिर्फ "लोड हो रहा है ...") इसे अवरुद्ध किए बिना।

यह कैसे करें?

Answer 1

3 निग्मा सही रास्ते पर है, लेकिन कम से कम सामान्य मामले में, एक विवरण गलत है।

AJAXSetup का उपयोग केवल डिफ़ॉल्ट प्रदान करता है, अगर बाद में आप कुछ AJAX कॉल करते हैं जो पहले सेन्ड के लिए अपनी कॉलबैक निर्दिष्ट करते हैं (यानी आपको कुछ विशिष्ट शीर्षलेख सेट करने की आवश्यकता होती है) या पूर्ण (आप दोनों सफलता को संभालना चाहते हैं और उसे त्रुटि भी करना चाहते हैं) AJAXSetup में लोगों को ओवरराइड करें और आपका लोडिंग सूचक टूट जाएगा।

इसके बजाय, का उपयोग Global Ajax Events (more about ajax events)

$(document).ajaxSend(function(e, jqXHR){ 
    //show the loading div here 
}); 
$(document).ajaxComplete(function(e, jqXHR){ 
    //remove the div here 
}); 

यह एक अधिक सामान्य समाधान है कि भले ही अन्य कोड भी तो कुछ वैश्विक या स्थानीय beforeSend/पूरा संचालकों सेट या ajaxSetup कॉल चाहता तोड़ने नहीं होगा।

Answer 2

$("#loading").show(); //before send 
$.get('/Stuff.php', function (data) { 
    $('#own').html(data); 
    $("#loading").hide(); //when sucess 
}); 

Answer 3

ajaxSetup

$.ajaxSetup({ 
    beforeSend:function(xmlHttpRequest){ 
    //show the loading div here 
    }, 
    complete:function(){ 

    //remove the div here 
    } 
    }); 

अब ajax कॉल

$.get('/Stuff.php', function (data) { 
    $('#own').html(data); 
}); 

Answer 4

आप jQuery के उपयोग beforeSend और complete समारोह बनाने का उपयोग करें। beforeSend में आप अपना नियंत्रण प्रदर्शित करते हैं और complete पर इसे छिपाते हैं।

Answer 5

ऐसा सिर्फ पूरा सरल:

<style type="text/css"> 
#loadingbar { 
    position: fixed; 
    z-index: 2147483647; 
    top: 0; 
    left: -6px; 
    width: 1%; 
    height: 2px; 
    background: #b91f1f; 
    -moz-border-radius: 1px; 
    -webkit-border-radius: 1px; 
    border-radius: 1px; 
    -moz-transition: all 500ms ease-in-out; 
    -ms-transition: all 500ms ease-in-out; 
    -o-transition: all 500ms ease-in-out; 
    -webkit-transition: all 500ms ease-in-out; 
    transition: all 500ms ease-in-out; 
} 
#loadingbar.waiting dd, #loadingbar.waiting dt { 
    -moz-animation: pulse 2s ease-out 0s infinite; 
    -ms-animation: pulse 2s ease-out 0s infinite; 
    -o-animation: pulse 2s ease-out 0s infinite; 
    -webkit-animation: pulse 2s ease-out 0s infinite; 
    animation: pulse 2s ease-out 0s infinite; 
} 

#loadingbar dt { 
opacity: .6; 
width: 180px; 
right: -80px; 
clip: rect(-6px,90px,14px,-6px); 
} 

#loadingbar dd { 
    opacity: .6; 
    width: 20px; 
    right: 0; 
    clip: rect(-6px,22px,14px,10px); 
} 

#loadingbar dd, #loadingbar dt { 
    position: absolute; 
    top: 0; 
    height: 2px; 
    -moz-box-shadow: #b91f1f 1px 0 6px 1px; 
    -ms-box-shadow: #b91f1f 1px 0 6px 1px; 
    -webkit-box-shadow: #B91F1F 1px 0 6px 1px; 
    box-shadow: #B91F1F 1px 0 6px 1px; 
    -moz-border-radius: 100%; 
    -webkit-border-radius: 100%; 
    border-radius: 100%; 
} 
</style> 


<script type="text/javascript"> 
$(document).ready(function() { 
    $.ajaxSetup({ 
     beforeSend:function(xmlHttpRequest){ 
      if ($("#loadingbar").length === 0) { 
        $("body").append("<div id='loadingbar'></div>") 
        $("#loadingbar").addClass("waiting").append($("<dt/><dd/>")); 
        $("#loadingbar").width((50 + Math.random() * 30) + "%"); 
      } 
        //show the loading div here 
     }, 
     complete:function(){ 
       $("#loadingbar").width("101%").delay(200).fadeOut(400, function() { 
         $(this).remove(); 
        }); 
     //remove the div here 
     } 
    }); 

}); 
</script> 

उन्हें अपने पृष्ठ के लिए रखा, और जब आप कर कभी फोन ajax लोड हो रहा है दिखा देंगे .. डेमो अपने वेब पर परीक्षण किया: http://www.xaluan.com

Answer 6

बूटस्ट्रैप मॉडल।

 var loadingPannel; 
     loadingPannel = loadingPannel || (function() { 
      var lpDialog = $("" + 
       "<div class='modal' id='lpDialog' data-backdrop='static' data-keyboard='false'>" + 
        "<div class='modal-dialog' >" + 
         "<div class='modal-content'>" + 
          "<div class='modal-header'><b>Processing...</b></div>" + 
          "<div class='modal-body'>" + 
           "<div class='progress'>" + 
            "<div class='progress-bar progress-bar-striped active' role='progressbar' aria-valuenow='100' aria-valuemin='100' aria-valuemax='100' style='width:100%'> " + 
             "Please Wait..." + 
            "</div>" + 
            "</div>" + 
          "</div>" + 
         "</div>" + 
        "</div>" + 
       "</div>"); 
      return { 
       show: function() { 
        lpDialog.modal('show'); 
       }, 
       hide: function() { 
        lpDialog.modal('hide'); 
       }, 

      }; 
     })(); 

अजाक्स कॉल

    $.ajax({ 
         url: "/", 
         type: "POST", 
         data: responseDetails, 
         dataType: "json", 
         traditional: true, 
         contentType: "application/json; charset=utf-8", 

         beforeSend: function() { 

          loadingPannel.show(); 

         }, 
         complete: function() { 

          loadingPannel.hide(); 
         }, 
         data: responseDetails 
        }) 
        .done(function (data) { 
          if (data.status == "Success") { 
//Success code goes here 
}