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");
 }

我尝试了许多变体，但要么未显示模式，要么显示但未删除，或者显示，然后我收到错误消息：错误：在初始化之前无法调用对话框上的方法；试图调用方法“关闭”。show 和 remove 函数在从控制台等自己调用时工作得很好。

ps 我使用 async: false 是因为我在加载后立即计算我的数据，如果我不这样做，它当然不会等待所有数据被加载。

4

1 回答 1

0

不幸的是，如果您将 async 设置为 false，您的浏览器将冻结，直到 ajax 查询返回。如果你想要像进度条这样的上下文提示，你需要保持 async 为真，并removeProgressBar在你的 ajax 调用的成功回调中调用。

于 2013-06-21T04:13:36.913 回答