使用 jquery 仅加载每个选项卡过滤器一次答案

【问题标题】：Loading only once each tab filter with jquery使用 jquery 仅加载每个选项卡过滤器一次
【发布时间】：2011-02-04 23:13:29
【问题描述】：

我有三个标签，每个标签都有特定的过滤器内容。当我单击每个选项卡时，特定的过滤器将加载到#filterContent div 中。

问题是，我希望每个过滤器只加载一次，并在每个选项卡上显示好的过滤器。

我正在使用 YUI 选项卡视图：http://developer.yahoo.com/yui/tabview/。

var tab0 = tabView.getTab(0);
var tab1 = tabView.getTab(1);
var tab2 = tabView.getTab(2);

tab0.addListener("click", onClickTabToPick);
tab1.addListener("click", onClickTabToSend);
tab2.addListener("click", onClickTabFinished);

var onClickTabToPick = function (e) {
    $.get("/OrderManager/ToPickFilter", function (data) {
        $("#filterContent").html(data);
    });
};

var onClickTabToSend = function (e) {
    $.get("/OrderManager/ToSendFilter", function (data) {
        $("#filterContent").html(data);
    });
};

var onClickTabFinished = function (e) {
    $.get("/OrderManager/FinishedFilter", function (data) {
        $("#filterContent").html(data);
    });
};

我怎样才能做到这一点。提前致谢。

【问题讨论】：

标签： jquery yui

【解决方案1】：

只需将数据加载到不同的容器中（filterContent1、filterContent2、filterContent3）。您可以使用空的 innerHTML 创建这些容器。在请求之前，您可以检查 $('#filterContent1').html()。如果它是空的，那么就提出请求，否则就显示它。

您仍然可以使用一个容器，但是您需要将来自服务器的响应存储在某个对象中：

var responses = { tab1: null, tab2: null, tab3: null };

var onClickTabToPick = function (e) {
    if ( responses.tab1 == null )
    {
        $.get("/OrderManager/ToPickFilter", function ( data ) {
            responses.tab1 = data;
        });
    }
    $("#filterContent").html( responses.tab1 );
};

对于其他标签，例如第一个标签。

【讨论】：