如何实现负载指示灯的引导模式等待AJAX​​来从服务器获取数据？ [英] How to implement a loading indicator for a bootstrap modal waiting for AJAX to fetch data from the server?

问题描述

我是从一个链接即可启动自举模式。约3秒钟，它只是坐在那里的空白，而AJAX查询从数据库中获取数据。我怎样才能实现某种负载指标？难道Twitter的自举在默认情况下提供此功能？

编辑：JS code模态

 ＆LT;脚本类型=文/ JavaScript的＆GT;
  $（'＃myModal）模式（隐藏）。
  $（'div.divBox一）。点击（函数（）{
    VAR供应商= $（本）的.text（）;
    $（'＃myModal）关闭（'秀'）。
    $（'＃myModal'）。在（'秀'，函数（）{
      $阿贾克斯（{
        键入：GET，
        网址：ip.php
        数据：ID =+供应商，
        成功：函数（HTML）{
          $（＃模体）HTML（HTML）;
          $（模头H3）HTML（供应商）;
          $（'。countstable1）。dataTable中（{
            sDom： "T<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
            sPaginationType：引导，
            oLanguage：{
              sLengthMenu：每页_MENU_记录
            }，
            aaSorting：[0，降序]，
            iDisplayLength：10，
            oTableTools：{
              sSwfPath：SWF / copy_csv_xls_pdf.swf
              aButtons：CSV，PDF]
            }
          }）;
        }
      }）;
    }）;
  }）;
  $（'＃myModal'）。在（'隐藏'，函数（）{
    $（＃模体），空（）。
  }）;
＆LT; / SCRIPT＆GT;
 

解决方案

我在你使用jQuery.get或其他一些jQuery的AJAX功能加载模式的猜测。您可以显示Ajax调用前的指标，并把它隐藏了ajax完成时。类似于

  $（'＃指标）显示（）;
$（'＃someModal'）得到（anUrl，someData，函数（）{$（'＃指标）隐藏（）;}）;
 

I have a bootstrap modal which is launched from a link. For about 3 seconds it just sits there blank, while the AJAX query fetches the data from the database. How can I implement some sort of a loading indicator ? Does twitter bootstrap provide this functionality by default ?

EDIT: JS code for modal

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

解决方案

I'm guessing you're using jQuery.get or some other jQuery ajax function to load the modal. You can show the indicator before the ajax call, and hide it when the ajax completes. Something like

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

这篇关于如何实现负载指示灯的引导模式等待AJAX​​来从服务器获取数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！