JQuery UI Tabs mise en cache

Je travaille dans une page ASP .net MVC de l'Application. J'ai un JQuery UI onglet dont le Javascript pour activer la mise en cache est comme suit.

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

J'ai construit trois onglet éléments à l'aide d'une liste dire tab1, tab2, tab3.

Maintenant ce qui se passe, c'est quand l'onglet est créé, il permet cahing pour tous l'onglet articles. Mais comment puis-je régler individuellement la mise en cache de ces onglet éléments nécessaires. Dire (tab1 cache, tab2 pas de cache, tab3 cache) je ne vois qu'un moyen pour appliquer la mise en cache à l'ensemble de l'onglet plutôt que d'appliquer la mise en cache à personne onglet éléments nécessaires.

Il existe également un besoin pour moi d'activer ou de désactiver la mise en cache de ces onglet éléments (tab1, tab2, tab3) de manière dynamique. Comment puis-je y parvenir. toute aide serait appréciée?

OriginalL'auteur SARAVAN | 2010-04-12

  1. 9

    J'ai récemment eu a utiliser pour cela ainsi. En regardant dans le code, il utilise des "cache.les onglets" avec $.données pour déterminer si un onglet doit être mis en cache. Donc, vous avez juste besoin de saisir l'élément, et l'ensemble $.data(a, "cache.tabs", false);

    J'ai créé une rapide extension à le faire, en supposant que les onglets sont statiques. Il peut y avoir des imprévus questions, et peut certainement être améliorée.

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

    Comme vous pouvez le voir je attribuer la vieille load méthode pour _load25624, juste un nom aléatoire, de le garder en tant que membre de l'objet, et de l'appeler dans la nouvelle load méthode après avoir déterminé si l'onglet doit être mis en cache. Utilisation:

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

    Va activer le cache pour l'ensemble des éléments, et de désactiver le cache pour le premier item (index 0).

    OriginalL'auteur Eric Muyser

  2. 5

    Donc, en simplifiant Eric analyse, vous pouvez contrôler la mise en cache de chaque onglet en réglant le cache.des onglets de données dans chaque onglet de l'élément d'ancrage. 

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

    Puis après le contenu de l'onglet a été chargé pour la première fois, vous pouvez activer la mise en cache pour cet onglet. Je voudrais simplement mettre dans le $(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)
});

    Merci, Eric!

    OriginalL'auteur William Niu

  3. 2

    Essayer cette 

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

    OriginalL'auteur Ashutosh Tripathi

  4. 0

    Aucun des ci-dessus a fonctionné pour moi sous IE. J'ai dû mettre 

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

    Au niveau de la page, plutôt que sur la méthode Ajax (qui a travaillé pour Chrome)

    Donc:

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

    Ainsi que: 

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

    OriginalL'auteur Matt