jQuery UI 选项卡缓存 v1.10.3答案

【问题标题】：jQuery UI Tabs Caching v1.10.3jQuery UI 选项卡缓存 v1.10.3
【发布时间】：2013-05-23 18:22:37
【问题描述】：

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 根本不缓存选项卡数据。希望有人能指出我正确的方向。

【问题讨论】：

这很奇怪 ajaxSettings.cache = false 必须在 IE 上工作；你检查过网络面板中的请求吗？您是否看到添加到请求页面的时间戳？
@爱德华。以下是 Fiddler 的标头... HTTP/1.1 200 OK 日期：2013 年 5 月 28 日星期二 01:09:15 GMT 服务器：Apache/2.2.22 (Ubuntu) X-Powered-By: PHP/5.4.6-1ubuntu1 .2 过期：2013 年 5 月 28 日星期二 04:09:15 GMT 缓存控制：public，max-age=10800 最后修改时间：2013 年 5 月 23 日星期四 03:10:02 GMT Set-Cookie：swTripsYear=2011； expires=Thu, 27-Jun-2013 01:09:15 GMT 变化：Accept-Encoding Content-Length: 68478 Keep-Alive: timeout=5, max=100 Connection: Keep-Alive Content-Type: text/html Don't看起来好像正在发送正确的 Expires 标头？
ui.ajaxSettings.cache 未定义，上述代码在 IE 和 Firefox 中都没有。

标签： jquery jquery-ui jquery-ui-tabs

【解决方案1】：

使用默认的 Ajax 选项卡加载，每次切换回选项卡时都会重新加载 Ajax。 “缓存”参数是为了防止这种情况发生，但它现在已被弃用，但正如 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 的东西。

【讨论】：