JQuery UI Tabs кэширование

Question

Я работаю в ASP .net MVC Application. У меня есть вкладка пользовательского интерфейса JQuery, 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(); 
     } 
    }); 
} 

Я построил три вкладки, используя список say tab1, tab2, tab3.

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

Существует также необходимость включить или отключить кэширование этих элементов табуляции (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() 
{ 
}