ajaxStart事件上的jQuery模式对话框

时间:2021-11-10 10:29:34

I'm trying to use a jQuery UI modal dialog as a loading indicator via the ajaxStart, ajaxStop / ajaxComplete events. When the page fires, an Ajax handler loads some data, and the modal dialog shows just fine. However, it never hides or closes the dialog when the Ajax event is complete. It's a very small bit of code from the local server that is returned, so the actual Ajax event is very quick.

我正在尝试通过ajaxStart,ajaxStop / ajaxComplete事件使用jQuery UI模式对话框作为加载指示器。当页面触发时,Ajax处理程序会加载一些数据,而模态对话框显示就好了。但是,当Ajax事件完成时,它永远不会隐藏或关闭对话框。这是返回的本地服务器的一小部分代码,因此实际的Ajax事件非常快。

Here's my actual code for the modal div:

这是模态div的实际代码:

      $("#modalwindow").dialog({
              modal: true,
              height: 50,
              width: 200,
              zIndex: 999,
              resizable: false,
              title: "Please wait..."
      })
      .bind("ajaxStart", function(){ $(this).show(); })
      .bind("ajaxStop", function(){ $(this).hide(); });

The Ajax event is just a plain vanilla $.ajax({}) GET method call.

Ajax事件只是一个普通的$ .ajax({})GET方法调用。

Based on some searching here and Google, I've tried altering the ajaxStop handler to use $("#modalwindow").close(), $("#modalwindow").destroy(), etc. (#modalwindow referred to here as to give explicit context).

基于在这里搜索和谷歌,我尝试改变ajaxStop处理程序使用$(“#modalwindow”)。close(),$(“#modalwindow”)。destroy()等(#modalwindow在这里提到)至于明确的背景)。

I've also tried using the standard $("#modalwindow").dialog({}).ajaxStart(... as well.

我也试过使用标准的$(“#modalwindow”)。dialog({})。ajaxStart(...也是。

Should I be binding the events to a different object? Or calling them from within the $.ajax() complete event?

我应该将事件绑定到不同的对象吗?或者在$ .ajax()完成事件中调用它们?

I should mention, I'm testing on the latest IE8, FF 3.6 and Chrome. All have the same / similar effect.

我应该提一下,我正在测试最新的IE8,FF 3.6和Chrome。所有都具有相同/相似的效果。

2 个解决方案

#1


6  

Found the answer:

找到答案:

  $("#modalwindow").dialog({
          modal: true,
          height: 50,
          width: 200,
          zIndex: 999,
          resizable: false,
          title: "Please wait..."
  })
  .bind("ajaxStart", function(){
      $(this).dialog("open"); })
  .bind("ajaxStop", function(){
      $(this).dialog("close");
  });

Note to self: RTFM.

自我注意:RTFM。

Of course in all this, now I realize that it opens and closes so quickly as to be useless. Oh well, hopefully someone will find this helpful.

当然,在所有这些中,现在我意识到它打开和关闭的速度很快就没用了。哦,希望有人会觉得这很有帮助。

#2


1  

"Whenever an Ajax request completes, jQuery checks whether there are any other outstanding Ajax requests." Do you have other AJAX requests running at the same time? You'll want to use ajaxComplete or a callback option to .ajax() instead, to just get the one completion.

“只要Ajax请求完成,jQuery就会检查是否还有其他未完成的Ajax请求。”您是否同时运行其他AJAX请求?您将要使用ajaxComplete或.ajax()的回调选项来获得一个完成。

#1


6  

Found the answer:

找到答案:

  $("#modalwindow").dialog({
          modal: true,
          height: 50,
          width: 200,
          zIndex: 999,
          resizable: false,
          title: "Please wait..."
  })
  .bind("ajaxStart", function(){
      $(this).dialog("open"); })
  .bind("ajaxStop", function(){
      $(this).dialog("close");
  });

Note to self: RTFM.

自我注意:RTFM。

Of course in all this, now I realize that it opens and closes so quickly as to be useless. Oh well, hopefully someone will find this helpful.

当然,在所有这些中,现在我意识到它打开和关闭的速度很快就没用了。哦,希望有人会觉得这很有帮助。

#2


1  

"Whenever an Ajax request completes, jQuery checks whether there are any other outstanding Ajax requests." Do you have other AJAX requests running at the same time? You'll want to use ajaxComplete or a callback option to .ajax() instead, to just get the one completion.

“只要Ajax请求完成,jQuery就会检查是否还有其他未完成的Ajax请求。”您是否同时运行其他AJAX请求?您将要使用ajaxComplete或.ajax()的回调选项来获得一个完成。