एक jQuery AJAX कॉल के लिए एक लोडिंग संकेतक लागू करें

Question 1

मेरे पास एक बूटस्ट्रैप मोडल है जो एक लिंक से लॉन्च किया गया है। लगभग 3 सेकंड के लिए यह सिर्फ खाली बैठता है, जबकि AJAX क्वेरी डेटाबेस से डेटा प्राप्त करता है। मैं किसी प्रकार के लोडिंग इंडिकेटर को कैसे लागू कर सकता हूं? क्या ट्विटर बूटस्ट्रैप डिफ़ॉल्ट रूप से यह कार्यक्षमता प्रदान करता है?

EDIT: मोडल के लिए JS कोड

<script type="text/javascript">
  $('#myModal').modal('hide');
  $('div.divBox a').click(function(){
    var vendor = $(this).text();
    $('#myModal').off('show');
    $('#myModal').on('show', function(){             
      $.ajax({
        type: "GET",
        url: "ip.php",
        data: "id=" + vendor,
        success: function(html){
          $("#modal-body").html(html);
          $(".modal-header h3").html(vendor);
          $('.countstable1').dataTable({
            "sDom": "T<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
            "sPaginationType": "bootstrap",
            "oLanguage": {
              "sLengthMenu": "_MENU_ records per page"
            },
            "aaSorting":[[0, "desc"]],
            "iDisplayLength": 10,
            "oTableTools": {
              "sSwfPath": "swf/copy_csv_xls_pdf.swf",
              "aButtons": ["csv", "pdf"]
            }
          });
        }
      });
    });
  });
  $('#myModal').on('hide', function () {
    $("#modal-body").empty();
  });
</script>

Question 2

मैं अनुमान लगा रहा हूं कि आप मॉडल लोड करने के लिए jQuery.get या कुछ अन्य jQuery के ajax फ़ंक्शन का उपयोग कर रहे हैं। आप अजाक्स कॉल से पहले संकेतक दिखा सकते हैं, और अजाक्स पूरा होने पर इसे छिपा सकते हैं। कुछ इस तरह

$('#indicator').show();
$('#someModal').get(anUrl, someData, function() { $('#indicator').hide(); });

Question 3

मैंने इस समस्या को इस उदाहरण के बाद हल किया:

यह उदाहरण jQuery जावास्क्रिप्ट लाइब्रेरी का उपयोग करता है।

सबसे पहले, AjaxLoad साइट का उपयोग करके एक Ajax आइकन बनाएं ।
फिर अपने HTML में निम्न जोड़ें:

<img src="/images/loading.gif" id="loading-indicator" style="display:none" />

और आपकी सीएसएस फ़ाइल के लिए निम्नलिखित:

#loading-indicator {
  position: absolute;
  left: 10px;
  top: 10px;
}

अंत में, आपको jax प्रदान करने वाली अजाक्स घटनाओं में हुक करने की आवश्यकता है; जब अजाक्स अनुरोध शुरू होता है, और जब यह समाप्त होता है, तो एक घटना के लिए एक हैंडलर:

$(document).ajaxSend(function(event, request, settings) {
    $('#loading-indicator').show();
});

$(document).ajaxComplete(function(event, request, settings) {
    $('#loading-indicator').hide();
});

यह समाधान निम्नलिखित लिंक से है। अजाक्स अनुरोध प्रसंस्करण के दौरान एक एनिमेटेड आइकन कैसे प्रदर्शित करें

Question 4

JQuery का उपयोग करके एक वैश्विक कॉन्फ़िगरेशन है। यह कोड प्रत्येक वैश्विक एजैक्स अनुरोध पर चलता है।

<div id='ajax_loader' style="position: fixed; left: 50%; top: 50%; display: none;">
    <img src="themes/img/ajax-loader.gif"></img>
</div>

<script type="text/javascript">
    jQuery(function ($){
        $(document).ajaxStop(function(){
            $("#ajax_loader").hide();
         });
         $(document).ajaxStart(function(){
             $("#ajax_loader").show();
         });    
    });    
</script>

यहाँ एक डेमो है: http://jsfiddle.net/sd01fdcm/

Question 5

एक लोडिंग इंडिकेटर बस एक एनिमेटेड इमेज (.gif) है जिसे तब तक प्रदर्शित किया जाता है जब तक कि AJAX अनुरोध पर पूरा होने वाला इवेंट नहीं कहा जाता है। http://ajaxload.info/ लोडिंग छवियों को उत्पन्न करने के लिए कई विकल्प प्रदान करता है जिन्हें आप अपने मॉडल्स पर ओवरले कर सकते हैं। मेरे ज्ञान के लिए, बूटस्ट्रैप अंतर्निहित कार्यक्षमता प्रदान नहीं करता है।

Question 6

इस तरह से मुझे इसे लोड करने वाली दूरस्थ सामग्री के साथ काम करना पड़ा, जिसे ताज़ा करना होगा:

$(document).ready(function () {
    var loadingContent = '<div class="modal-header"><h1>Processing...</h1></div><div class="modal-body"><div class="progress progress-striped active"><div class="bar" style="width: 100%;"></div></div></div>';

    // This is need so the content gets replaced correctly.
    $("#myModal").on("show.bs.modal", function (e) {
        $(this).find(".modal-content").html(loadingContent);        
        var link = $(e.relatedTarget);
        $(this).find(".modal-content").load(link.attr("href"));
    });    

    $("#myModal2").on("hide.bs.modal", function (e) {
        $(this).removeData('bs.modal');
    });
});

मूल रूप से, लोडिंग संदेश के साथ लोड करते समय बस मोडल सामग्री को बदलें। एक बार लोडिंग समाप्त होने के बाद सामग्री को बदल दिया जाएगा।

Question 7

इस तरह से मुझे एक ग्लिफ़िकॉन द्वारा लोडिंग संकेतक का एहसास हुआ:

<!DOCTYPE html>
<html>

<head>
    <title>Demo</title>

    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"></script>

    <style>
        .gly-ani {
          animation: ani 2s infinite linear;
        }
        @keyframes ani {
          0% {
            transform: rotate(0deg);
          }
          100% {
            transform: rotate(359deg);
          }
        }
    </style>  
</head>

<body>
<div class="container">

    <span class="glyphicon glyphicon-refresh gly-ani" style="font-size:40px;"></span>

</div>
</body>

</html>