Question

我正在尝试在模态对话框中显示ajax微调器。我在我的页面中有一个ajax微调器，其中一个是ajax动作，最初我用以下代码编写了它。

$(document)
      .ajaxStart(function () {
              $loading.show();
      })
      .ajaxStop(function () {
              $loading.hide();
});

但这太通用了，现在我想在其中一个模态弹出窗口中显示微调器，我尝试使用以下代码

$('#modal_loading_div').bind("ajaxStart", function(){
  alert('In ajax Start of modal dialog');
  $modalLoading.show();
});
$('#modal_loading_div').bind("ajaxStop", function(){
  alert('In ajax Stop of modal dialog');
  $modalLoading.hide();
});

以上代码不是单次调用，控件不流动。作为一个即时的调整，我试着这样做

$(document)
      .ajaxStart(function () {
          if(dialog){
              $('#delete_loading_div').show();  
          }else{
              $loading.show();
          }
      })
      .ajaxStop(function () {
          if(dialog){
              $('#delete_loading_div').hide();  
          }else{
              $loading.hide();
          }
});

但想知道正确的方法。我正在使用jquery-2.1.4

Answer 1

实际上并没有'正确'的方法。

从jQuery 1.8开始，.ajaxStart（）方法只应附加到文档。（https://api.jquery.com/ajaxStart/）

如果您对ajaxStart具有约束力，那么您共享的代码实际上是区分“模态”或“通用”微调器应该显示的唯一方法。我想你有类似的东西：

$('.open-modal-dlg').click(function(){
    dialog = true;
    $.ajax(...);
    ...
});
$('.close-modal-dlg').click(function(){
    dialog = false;
    ...
});

这很好，因为它。

我能看到的唯一选择是不使用$.ajaxStart，而是处理在每个AJAX调用上显示微调器。

$('.loading').show();
$.ajax(...).always(function(){
    $('.loading').hide();
});

// -- for modals...

$('.loading-modal').show();
$.ajax(...).always(function(){
    $('.loading-modal').hide();
});

.ajaxStart是一个全局的AJAX jQuery事件，所以除了自己跟踪一个单独的变量之外，没有办法限制它。

模态对话框中的Ajax Spinner

1 个答案: