jQuery UI 选项卡缓存 v1.10.3

Question

• jQuery:v 1.9.1
• jQuery UI:v 1.10.3
• 浏览器:Internet Explorer 10.0.920

我正在使用 jQuery UI 选项卡来显示数据组。每个选项卡的内容都是使用 AJAX 检索的。无法缓存选项卡内容。在 v 1.10 之前，我们使用 Tabs 缓存属性和 ajaxOptions 缓存属性来控制缓存。一切都很酷。

升级到 1.10 后，这两个参数已被删除。可以通过使用 beforeLoad 事件来实现该功能。这是新的标签代码...

$(function () {
    $("#tripYears").tabs({ 
        active: 0,
        beforeLoad: function( event, ui ) {
            ui.ajaxSettings.cache = false;
        } 
    });
});

这似乎适用于除 IE 之外的所有浏览器。我已经使用 IE 版本 8 和 10 进行了测试。Chrome、Firefox、Opera 和 Safari 根本不缓存选项卡数据。希望有人能给我指出正确的方向。

Answer 1

使用默认的 Ajax 选项卡加载，每次切换回选项卡时，它都会重新加载 Ajax。 “cache”参数是为了防止这种情况发生，但现在已被弃用，但正如 jQueryUI 指出的那样，您可以使用 beforeLoad 来推出自己的参数。

您似乎试图让浏览器缓存 Ajax 本身。然而，选项卡的内容已经存在于 DOM 中，因此当您返回到先前加载的选项卡时，实际上根本不需要发出 Ajax 请求。

您只想停止 jQuery 重新加载该选项卡的内容。所以像这样的事情可以防止这种情况发生:

$("#tabs").tabs({
   beforeLoad: function (event, ui) {
        if ($(ui.panel).html()) {    // If content already there...
            event.preventDefault();      // ...don't load it again.
        }
    }
});

这完全在 jQueryUi/jQuery 内部，因此不依赖于任何浏览器 Ajaxy 内容。