0

データの読み込み中にモーダル ダイアログを表示しようとしています。フローは次のようになります。

showProgressBar();

$.ajaxSetup({
  async: false
});

loadData(file);

$.ajaxSetup({
  async: true
});

removeProgressBar();

私もこれを試しました：

$.ajaxSetup({
  async: false
});

$(document).ajaxStart(function(){
 showProgressBar();
});

loadData(file);

$.ajaxSetup({
  async: true
});

$(document).ajaxStop(function(){
  removeProgressBar();
});

私の関数は次のようになります。

function showProgressBar(){

    var theBody = d3.select("body")
                  .append("div")
                  .attr("title", "Processing")
                  .attr("class", "ui-widget-content uncollapsebox") 
                  .attr("id", "progressDialog")
                    .append("div")
                       .attr("id", "progressbar")
                       .attr("width",200)
                       .attr("height",20)

$(function() {
  $( "#progressbar" ).progressbar({
    value: false
  });
 });

$(function() {
    $( "#progressDialog" ).dialog({modal: true,
                                  closeOnEscape: false
                                  }); 
});

}

function removeProgressBar(){
   $('#progressDialog').dialog('close');
   $('#progressDialog').remove(); 
}

私のロードファイルは次のようになります。

function loadData(nameOfFile){

  $(function(){
      $.getJSON("...",function(data){ 

      }).error(function(){
          console.log('error loading data!');
      });
  });
  console.log("done with getJSON");
 }

私は多くのバリエーションを試しましたが、モーダルが表示されていないか、表示されていて削除されていないか、表示されていると次のエラーが表示されます。メソッド「close」を呼び出そうとしました。show および remove 関数は、コンソールなどから呼び出された場合に問題なく動作します。

ps async: false を使用します。これは、ロードの直後にデータを計算するためです。もちろん、そうしないと、すべてのデータがロードされるのを待ちません。

4

1 に答える 1

0

残念ながら、async を false に設定すると、ajax クエリが返されるまでブラウザーがフリーズします。プログレス バーのようなコンテキスト キューが必要な場合は、async を true のままにremoveProgressBarして、ajax 呼び出しの成功コールバックを呼び出す必要があります。

于 2013-06-21T04:13:36.913 に答える