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

Question

我使用JQuery UI Tabs。我的做法是按照这里建议的，使用Ajax加载每个选项卡的内容：http://jqueryui.com/tabs/#ajax 问题：如果用户依次点击选项卡A、B，然后再次点击选项卡A，则会加载选项卡A的内容两次。 是否可能缓存JQuery UI选项卡的内容？

- confile

---

你使用的确切的AJAX代码是什么？除非你在客户端脚本中保存选项卡的内容，否则每次切换时AJAX请求都会触发。没有看到确切的代码很难确定AJAX请求是否被正确缓存。 - thatidiotguy

应该可以使用相同的URL进行GET请求。 - Murali Murugesan

Answer 1

尝试使用`beforeLoad`事件：

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

---

beforeLoad( event, ui )

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

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

- hunter

---

它的效果很好，但你必须使用1.9以上版本的jquery-ui。 - Michael

有人能解释一下为什么这个代码实际上是有效的吗？它确实有效，但我不确定为什么当变量为空时返回true就可以解决问题——为什么它不会阻止第一次加载的工作呢？ - Ryan Williams

返回 true 表示选项卡内容尚未加载，可以继续进行。返回 false 表示显示选项卡内容但不尝试加载内容。 - hunter

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 请求，请使用服务器端时间戳。

- TigerBear

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.");
            });
        }
    });
});

- Deepanshu Jain