3

如果我有 4 个选项卡，其中前 2 个加载了 ajax，最后 2 个是静态的，我如何默认预加载 2 个 ajax 选项卡？

目前，只有第一个选项卡会自动加载，第二个选项卡会在单击时加载。我希望它们都被加载，以便当我单击第二个时，内容已经加载。我试图在第二个选项卡上调用 load 事件，如下所示：

$(document).ready(function () {
    $("#main-tabs").tabs({
        cache: true
    });

    $("#main-tabs").tabs("load", 1);
});

这会加载第二个选项卡，但由于某种奇怪的原因，第一个选项卡根本没有加载；即使我单击不同的选项卡并单击第一个选项卡，它也不会加载。

然后我尝试了这样的事情：

$(document).ready(function () {
    $("#main-tabs").tabs({
        cache: true
    });

    $("#main-tabs").tabs("load", 0);
    $("#main-tabs").tabs("load", 1);
});

结果相同，第二个选项卡已加载，第一个未加载。

如何自动加载所有这些（ajax 的）？

4

1 回答 1

7

问题的根源

两个事实：

  • 当 jQuery 使用其load方法加载一个选项卡时，如果另一个 AJAX 加载请求正在进行，这将被中止（可能是因为如果您选择一个选项卡并通过 AJAX 加载，然后快速选择另一个要加载的选项卡，jQuery 假设您没有想要加载两者 - 只是最后一个）。
  • 当您设置第一个选项卡由 AJAX 加载时，.tabs("load",0)将默认调用以填充第一个选项卡。

结合这两个事实，您会看到发生了什么。load首先被调用以填充第一个选项卡，然后再次调用以填充第二个选项卡。第二个负载抵消了第一个负载。

可能的解决方案

既然你不能load同时在同一个标​​签菜单上发出多个 s，我们就不得不另想办法了。此解决方案使用load选项卡选项按顺序加载每个选项卡。换句话说，当一个加载完成时，它开始加载下一个。当那个完成时，它会加载下一个，依此类推。

//the indexes to be loaded.
//In your case it's only index 1 (index 0 is loaded automatically)
var indexesToLoad = [1];

var loadNextTab = function() {
    if (indexesToLoad.length == 0) return;
    var index = indexesToLoad.shift();
    $("#main-tabs").tabs("load",index);
};

$("#main-tabs").tabs({
    cache: true,
    load: loadNextTab
});

此方法的可能改进：

  • 与其指定要加载的索引，不如让它自己弄清楚哪些选项卡是 AJAX 选项卡并加载它们
  • 使 loadNextTab 可以同时在多个选项卡式菜单上使用
  • 使其可与其他加载回调函数集成（如果这是一个词）

我怎么知道出了什么问题？

通过使用萤火虫。它是 Firefox 的插件。Firebug 在其控制台中显示所有 AJAX 请求，并且如屏幕截图所示，弄清楚发生了什么并不难 :) 我真的推荐它。（大多数主要浏览器都有类似的工具 - 在 chrome 或 F12 i IE 中按 ctrl+shift+j。）

显示 ajax 请求的 Firebug 控制台屏幕截图

于 2010-09-10T22:55:38.963 回答