緩存JQuery UI-Tabs Ajax加載的內容？

Question

我使用JQuery UI Tabs 。 我所做的是使用Ajax加載每個選項卡的內容，如下所示： http ： //jqueryui.com/tabs/#ajax

問題：如果用戶單擊選項卡A，然后再單擊選項卡B，然后再單擊選項卡A，則選項卡A的內容將加載兩次。

是否可以緩存JQuery UI選項卡的內容？

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回調相同的限制。

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