javascript - 缓存 JQuery UI-Tabs Ajax 加载的内容？

Question

我使用JQuery UI Tabs。我所做的是使用 Ajax 加载每个选项卡的内容，如下所示：http: //jqueryui.com/tabs/#ajax

问题：如果用户点击 Tab A，然后点击 Tab B，然后再次点击 Tab A，则 Tab A 的内容被加载了两次。

是否可以缓存 JQuery UI 选项卡的内容？

Answer 1

尝试使用beforeLoad事件：

$(".selector").tabs({
    beforeLoad: function(event, ui) {
        // if the target panel is empty, return true
        return ui.panel.html() == "";
    }
});

---

加载前（事件，用户界面）

在 beforeActivate 事件之后即将加载远程选项卡时触发。可以取消以防止标签面板加载内容；尽管面板仍将被激活。此事件在发出 Ajax 请求之前触发，因此可以对 ui.jqXHR 和 ui.ajaxSettings 进行修改。

注意：虽然提供了 ui.ajaxSettings 并且可以修改，但其中一些设置已经由 jQuery 处理。例如，已应用预过滤器、已处理数据并已确定类型。beforeLoad 事件同时发生，因此具有与来自 jQuery.ajax() 的 beforeSend 回调相同的限制。

Answer 2

我以前遇到过这个。

将时间戳添加到服务器端 url。这样，每次重新加载页面并联系服务器时，都会有一个新的时间戳。但是当您在客户端单击时，IE 不会重新加载 url，因为它是相同的，并且只会在页面重新加载/导航离开和返回时发生变化。

php:

$time = time();
$tabs = "<div id='tabs'>
<ul>
<li><a href='Home.php?viewIsActive=true&tab=true&timeStamp=" . $time . "'> Active </a></li>
<li><a href='Home.php?listAll=true&tab=true&timeStamp=" . $time . "'> List All </a>    </li>
</ul>
</div>"

因此，对于您只想在每次页面刷新/导航时加载一次的 ajax 请求，请使用服务器端时间戳。

Answer 3

$(function () {
    $("#tabs").tabs({
        beforeLoad: function (event, ui) {
            if (ui.tab.data("loaded")) {
                event.preventDefault();
                return;
            }
            //ui.ajaxSettings.cache = false,
            ui.panel.html('<img src="images/loader.gif" width="24" height="24" style="vertical-align:middle;"> Loading...'),
            ui.jqXHR.success(function() {
                ui.tab.data( "loaded", true );
            }),
            ui.jqXHR.error(function () {
                ui.panel.html(
                "Please Reload Page or Try Again Later.");
            });
        }
    });
});