Question

我正在尝试在加载数据时显示模式对话框。流程如下：

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

我已经尝试了很多变化但是模式没有显示或显示并且没有删除或显示然后我收到错误说：错误：在初始化之前无法调用对话框上的方法;试图调用方法'关闭'。显示和删除功能在被自己调用时可以正常工作。控制台。

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

Answer 1

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

在getJSON加载数据期间显示jQuery Modal Progress Bar

1 个答案: