ใช้ตัวบ่งชี้การโหลดสำหรับการเรียก jQuery AJAX

Question 1

ฉันมีโมดอล Bootstrap ซึ่งเปิดใช้จากลิงค์ ประมาณ 3 วินาทีมันจะว่างเปล่าในขณะที่คิวรี AJAX ดึงข้อมูลจากฐานข้อมูล ฉันจะติดตั้งตัวบ่งชี้การโหลดบางประเภทได้อย่างไร twitter bootstrap มีฟังก์ชันนี้เป็นค่าเริ่มต้นหรือไม่

แก้ไข: รหัส 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 อื่น ๆ เพื่อโหลดโมดอล คุณสามารถแสดงตัวบ่งชี้ก่อนการโทรของ ajax และซ่อนไว้เมื่อ ajax เสร็จสิ้น สิ่งที่ต้องการ

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

Question 3

ฉันแก้ไขปัญหาเดียวกันตามตัวอย่างนี้:

ตัวอย่างนี้ใช้ไลบรารี jQuery JavaScript

ครั้งแรกที่สร้างอาแจ็กซ์ไอคอนใช้เว็บไซต์ AjaxLoad
จากนั้นเพิ่มสิ่งต่อไปนี้ใน HTML ของคุณ:

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

และสิ่งต่อไปนี้ในไฟล์ CSS ของคุณ:

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

สุดท้ายคุณต้องเชื่อมต่อกับเหตุการณ์ Ajax ที่ jQuery มีให้ ตัวจัดการเหตุการณ์หนึ่งเมื่อคำขอ Ajax เริ่มต้นและอีกตัวหนึ่งเมื่อสิ้นสุด:

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

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

วิธีแก้ปัญหานี้มาจากลิงค์ต่อไปนี้ วิธีแสดงไอคอนเคลื่อนไหวในระหว่างการประมวลผลคำขอ Ajax

Question 4

มีการกำหนดค่าส่วนกลางโดยใช้ jQuery รหัสนี้ทำงานในทุกคำขอของ ajax ทั่วโลก

<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/มีตัวเลือกมากมายในการสร้างภาพโหลดที่คุณสามารถวางซ้อนบนโมดอลของคุณได้ ตามความรู้ของฉัน Bootstrap ไม่มีฟังก์ชันการทำงานในตัว

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

นี่คือวิธีที่ฉันตระหนักถึงตัวบ่งชี้การโหลดโดย Glyphicon:

<!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>