JQuery UIタブキャッシュ

caching jquery tabs user-interface
JQuery UIタブキャッシュ

ASP .net MVCアプリケーションで作業しています。 キャッシングを有効にするJavascriptが次のようなJQuery UIタブがあります。

function LoadStudentDetailTabs() {
    $('#tabStudentDetail').tabs({
        cache: true,
        spinner: '',
        select: function(event, ui) {

            $("#gridSpinnerStudentDetailTabs h5").text("Loading Details...");
            $('#tabStudentDetail > .ui-tabs-panel').hide();
            $("#gridSpinnerStudentDetailTabs").show();
        },
        load: function(event, ui) {
            $("#gridSpinnerStudentDetailTabs").hide();
            $('#tabStudentDetail > .ui-tabs-panel').show();
        },
        show: function(event, ui) {
            $("#gridSpinnerStudentDetailTabs").hide();
            $('#tabStudentDetail > .ui-tabs-panel').show();
        }
    });
}

リストtab1、tab2、tab3を使用して3つのタブ項目を作成しました。

タブが構築されると、すべてのタブ項目のキャッシングが有効になります。 しかし、必要に応じてこれらのタブ項目に個別にキャッシュを設定するにはどうすればよいですか。 言う(tab1キャッシュ、tab2キャッシュなし、tab3キャッシュ)必要に応じて個々のタブ項目にキャッシュを適用するのではなく、タブ全体にキャッシュを適用する方法しかありません。

これらのタブ項目(tab1、tab2、tab3)へのキャッシュを動的に有効または無効にする必要もあります。 どうすればこれを達成できますか。 助けていただければ幸いです?

  8  6


ベストアンサー

私も最近これを使用しました。 コードを調べると、http://api.jquery.com/data/ [$ .data]で「cache.tabs」を使用して、タブをキャッシュする必要があるかどうかを判断します。 したがって、要素を取得して、 `$ .data(a、” cache.tabs “、false);`を設定するだけです。

タブが静的であると仮定して、それを行うための簡単な拡張機能を作成しました。 予期しない問題が発生する可能性があり、確実に改善できます。

(function($) {
    $.extend($.ui.tabs.prototype, {
        _load25624: $.ui.tabs.prototype.load,
        itemOptions: [],
        load: function(index) {
            index = this._getIndex(index);

            var o = this.options,
                a = this.anchors.eq(index)[0];

            try {
                if(o.itemOptions[index].cache === false)
                    $.data(a, "cache.tabs", false);
            }
            catch(e) { }

            return this._load25624(index);
        }
    });
})(jQuery);

ご覧の通り、古い load`メソッドを _load25624`にランダムな名前で割り当て、オブジェクトのメンバーとして保持し、タブをキャッシュするかどうかを決定した後、新しい `load`メソッドで呼び出します。 使用法:

$("#tabs").tabs({
    cache: true,
    itemOptions: [
        { cache: false }
    ]
});

アイテムセット全体のキャッシュをオンにし、最初のアイテム(インデックス0)のみのキャッシュをオフにします。

9


したがって、Ericの分析を簡素化して、各タブのアンカー要素に「cache.tabs」データを設定することにより、各タブのキャッシュを制御できます。

// disable cache by default
$("#tabs").tabs({
    cache: false,
});

次に、タブのコンテンツが初めてロードされた後、そのタブのキャッシュを有効にできます。 私は単にそれを `$(document).ready`に入れます:

$(document).ready(function () {
    // cache content for the current tab
    var currentTabIndex = $("#tabs").tabs('option', 'selected');
    var currentTabAnchor = $("#tabs").data('tabs').anchors[currentTabIndex];
    $(currentTabAnchor).data('cache.tabs', true)
});

ありがとう、エリック!

5


これを試して

$(document).ready(function(){
  $("#tabs").tabs({
    spinner: 'Loading...',
    cache: false,
    ajaxOptions: {cache: false}
  });
});

2


IEで上記のどれも機能しませんでした。 私は入れなければなりませんでした

[OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]

Ajaxメソッド(Chromeで機能した)ではなく、ページレベルで

So:

[OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
public ViewResult MyPage()
{
}

と同様:

[OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
public JsonResult MethodCalledByAjax()
{
}

0


タイトルとURLをコピーしました