如果单击其他选项卡，jqueryui ajax 选项卡将停止加载答案

【问题标题】：jqueryui ajax tab stops loading if other tabs are clicked如果单击其他选项卡，jqueryui ajax 选项卡将停止加载
【发布时间】：2010-08-16 16:07:28
【问题描述】：

我设置了一个 jQueryUI 选项卡控件，它有两个选项卡。一个通过 ajax 加载其内容，并且是默认选项卡。另一个是简单的非 ajax 选项卡。

当用户访问页面时，会显示 ajax 选项卡。由于加载内容至少需要 5-10 秒，因此一些用户点击查看第二个选项卡。此时，显示第二个选项卡时似乎取消了 ajax 调用 - 选项卡的加载器消失了，单击返回 ajax 选项卡只显示一个空白 div。由于我已关闭缓存，因此该选项卡不会重新加载。打开缓存将允许用户至少再次请求数据，但由于这些调用可能需要很长时间，这不是一个可行的解决方案。

这种情况下的理想行为是让 ajax 选项卡继续保持其请求打开，即使单击其他选项卡也是如此。

这可能吗？

【问题讨论】：

标签： jquery-ui

【解决方案1】：

默认行为是在挂起的请求上调用.abort()you can see it in the source here：

if ( this.xhr ) {
  this.xhr.abort();
  delete this.xhr;
}

但您可以稍微欺骗一下，并使用select 事件处理程序删除对先前 XmlHeepRequest 的引用，如下所示：

$("#tabs").tabs('destroy').tabs({
  select: function(event, ui) {
    $(this).data("tabs").xhr = null;
  }
});

这是因为select event handler 被触发before that .abort() call when selecting。

【讨论】：

谢谢！我会试一试并报告。
好的，看起来这种技术不起作用。 select 事件被正确触发，但我将 ajax 设置为第一个（默认）选项卡，显然 select 事件仅在单击选项卡时触发，而不是在默认选项卡时触发。即便如此，当我单击另一个选项卡并返回 ajax 选项卡时，当切换到非 ajax 选项卡时，ajax 请求仍然被中断。因此，我不确定即使在默认加载 ajax 选项卡时触发了 select 事件（不单击它），这种技术是否会起作用。
我换了行“$(this).data("tabs").xhr = null;" “删除 this.xhr;”我相信这行得通。但是，_cleanup 函数删除了 ajax 选项卡的微调器，这使用户看起来好像 ajax 查询已中止，而实际上并没有中止。我想这并不理想，但比旧的行为要好。我会看看我是否可以以某种方式覆盖 _cleanup 的行为，以允许微调器在 ajax 请求仍处于未决状态时继续执行其旋转行为。
Nick 的 select 函数设置 xhr = null 对我有用；但是，我发现 jquery-ui-1.9.2 在标签完成加载之前不允许我激活（选择）一个标签。简单的解决方法：在ui.tabs 小部件的_eventHandler 方法中注释掉jquery 代码中的tab.hasClass( "ui-tabs-loading" ) ||（最小化代码中的s.hasClass("ui-tabs-loading")||）。