JQuery UI Tabs Zwischenspeichern

Question

Ich arbeite in einer ASP.NET MVC-Anwendung. Ich habe eine JQuery UI-Registerkarte, deren JavaScript zum Aktivieren des Caching wie folgt ist.

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 konstruierte drei Registerkarte Elemente mit einer Liste sagen Tab1, Tab2, Tab3.

Nun, was passiert, wenn die Registerkarte Constructed ist ermöglicht es Caching für alle Registerkarte Elemente. Aber wie kann ich die Zwischenspeicherung für diese Registerkartenelemente individuell einstellen? Say (tab1 cache, tab2 no cache, tab3 cache) Ich kann nur eine Möglichkeit sehen, Caching auf die gesamte Registerkarte anzuwenden, anstatt das Caching auf einzelne Tab-Elemente nach Bedarf anzuwenden.

Es ist auch notwendig, dass ich die Zwischenspeicherung für diese Registerkarten (Tab1, Tab2, Tab3) dynamisch ein- oder auschecke. Wie kann ich das erreichen? jede Hilfe würde geschätzt werden?

Answer 1

Ich hatte kürzlich auch eine Verwendung dafür. Wenn Sie in den Code schauen, wird "cache.tabs" mit $.data verwendet, um festzustellen, ob eine Registerkarte zwischengespeichert werden soll. Also müssen Sie nur das Element greifen und $.data(a, "cache.tabs", false);

setzen

Ich habe eine schnelle Erweiterung erstellt, um genau das zu tun, vorausgesetzt, die Registerkarten sind statisch. Es kann unvorhergesehene Probleme geben und kann sicherlich verbessert werden.

(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 Sie kann ich die alte load Methode _load25624 sehen zuweisen, um nur einige zufälligen Namen, es als Mitglied des Objekts zu halten, und es in der neuen load Methode aufrufen, nachdem sie festgestellt haben, wenn der Reiter sein sollte im Cache gespeichert. Verbrauch:

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

auf Cache für den gesamten Satz von Elementen verwandeln und deaktivieren Cache nur für den ersten Punkt (Index 0).

Answer 2

Also vereinfachen Sie Erics Analyse, können Sie das Zwischenspeichern jeder Registerkarte steuern, indem Sie die 'cache.tabs' Daten in jedem Ankerelement der Registerkarte festlegen.

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

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

Answer 3

diese

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

Answer 4

Keine der für mich in IE gearbeitet oben versuchen. Ich hatte

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

auf Seitenebene zu setzen, anstatt sich auf die Ajax-Methode (die für Chrome gearbeitet)

So:

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

Neben:

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