Zwischenspeichern von JQuery-UI-Tabs

Ich arbeite in einer ASP .net MVC-Anwendung. Ich habe eine JQuery-UI-Registerkarte, deren Javascript zum Aktivieren des Cachings wie folgt lautet.

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

Ich habe drei Registerkartenelemente mit einer Liste erstellt, z. B. tab1, tab2, tab3.

Was jetzt passiert, ist, wenn die Registerkarte erstellt wird, es ermöglicht das Cahen für alle Registerkartenelemente. Aber wie kann ich das Caching für diese Registerkartenelemente nach Bedarf individuell einstellen? Sagen Sie (Tab1-Cache, Tab2 kein Cache, Tab3-Cache) Ich kann nur eine Möglichkeit sehen, das Caching auf die gesamte Registerkarte anzuwenden, anstatt das Caching nach Bedarf auf einzelne Registerkartenelemente anzuwenden.

Außerdem muss ich das Caching für diese Registerkartenelemente (tab1, tab2, tab3) dynamisch aktivieren oder deaktivieren. Wie kann ich das erreichen. jede hilfe wäre dankbar?

Ich hatte vor kurzem auch eine Verwendung dafür. Wenn man sich den Code ansieht, verwendet er “cache.tabs” mit $.Daten um zu bestimmen, ob eine Registerkarte zwischengespeichert werden soll. Sie müssen also nur das Element greifen und einstellen $.data(a, "cache.tabs", false);

Ich habe eine schnelle Erweiterung erstellt, um genau das zu tun, vorausgesetzt, die Registerkarten sind statisch. Es können unvorhergesehene Probleme auftreten, die sicherlich verbessert werden können.

(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);

Wie ihr seht, verweise ich das alte load Methode zu _load25624, nur einen zufälligen Namen, behalte ihn als Mitglied des Objekts und rufe ihn im neuen auf load -Methode, nachdem Sie festgestellt haben, ob die Registerkarte zwischengespeichert werden soll. Verwendung:

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

Aktiviert den Cache für den gesamten Satz von Elementen und deaktiviert den Cache nur für das erste Element (Index 0).

Um Erics Analyse zu vereinfachen, können Sie das Caching jedes Tabs steuern, indem Sie die ‘cache.tabs’-Daten im Ankerelement jedes Tabs setzen.

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

Nachdem der Inhalt der Registerkarte zum ersten Mal geladen wurde, können Sie das Caching für diese Registerkarte aktivieren. Ich würde es einfach in die $(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)
});

Danke, Erik!

Versuche dies

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

Keines der oben genannten hat für mich im IE funktioniert. ich musste setzen

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

Auf Seitenebene und nicht auf der Ajax-Methode (die für Chrome funktionierte)

So:

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

Ebenso gut wie:

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