1. ホーム
  2. javascript

[解決済み] jQuery AJAX呼び出しのローディングインジケータの実装

2023-03-21 10:45:20

質問

リンクから起動するBootstrapのモーダルがあります。AJAX クエリがデータベースからデータを取得する間、約 3 秒間空白のままです。ある種の読み込みインジケータを実装するにはどうしたらよいでしょうか。twitterのブートストラップは、デフォルトでこの機能を提供していますか?

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>

どのように解決するのですか?

モーダルの読み込みに jQuery.get などの jQuery ajax 関数を使用しているのではないでしょうか。Ajax 呼び出しの前にインジケータを表示し、Ajax が完了したら非表示にすることができます。次のような感じです。

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