JQuery UI Кэширование вкладок

Question

Я работаю в приложении ASP .net MVC. У меня есть вкладка JQuery UI, чей Javascript для включения кэширования выглядит следующим образом.

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.

Теперь, что происходит, когда вкладка создается, она включает кэширование для всех элементов вкладки. Но как я могу индивидуально настроить кэширование для этих элементов вкладки при необходимости. Скажем (кэш tab1, tab2 no cache, кэш tab3) Я вижу только способ применить кеширование ко всей вкладке, а не применять кеширование к отдельным элементам вкладки по мере необходимости.

Мне также необходимо динамически включать или отключать кэширование для этих элементов вкладок (tab1, tab2, tab3). Как я могу этого добиться. любая помощь будет оценена?

Answer 1

Недавно я тоже использовал это. Рассматривая код, он использует «cache.tabs» с $. Data , чтобы определить, следует ли кэшировать вкладку. Так что вам просто нужно взять элемент и установить $.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).

Answer 2

Итак, упрощая анализ Эрика, вы можете контролировать кэширование каждой вкладки, устанавливая данные «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)
});

Спасибо, Эрик!

Answer 3

Попробуйте это

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

Answer 4

Ничто из вышеперечисленного не работает для меня в IE. Я должен был поставить

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

На уровне страницы, а не на методе Ajax (который работал для Chrome)

Итак:

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

А также:

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