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

时间:2013-10-31 16:41:24

标签: javascript jquery html jquery-ui jquery-ui-tabs

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

问题:如果用户再次单击选项卡A,然后单击选项卡B,再选择选项卡A,则选项卡A的内容将加载两次。

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

3 个答案:

答案 0 :(得分:6)

尝试使用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事件同时发生,并且   因此具有与beforeSend回调相同的限制   jQuery.ajax()。

答案 1 :(得分:1)

我以前遇到过这个问题。

将时间戳添加到服务器端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请求,请使用服务器端时间戳。

答案 2 :(得分:0)

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