Reputation: 15121
I am working in an ASP .net MVC Application. I have a JQuery UI tab whose Javascript to enable caching is as follows.
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();
}
});
}
I constructed three tab items using a list say tab1, tab2, tab3.
Now what happens is when the tab is contructed it enables cahing for all the tab items. But how can I individually set caching to these tab items as needed. Say (tab1 cache, tab2 no cache, tab3 cache) I can only see a way to apply caching to the entire tab rather than applying caching to individual tab items as needed.
There is also a need for me to enable or disable caching to these tab items (tab1, tab2, tab3) dynamically. How can I achieve this. any help would be appreciated?
Upvotes: 8
Views: 15199
Reputation: 1574
None of the above worked for me in IE. I had to put
[OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
At the page level, rather than on the Ajax method (which worked for Chrome)
So:
[OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
public ViewResult MyPage()
{
}
As well as:
[OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
public JsonResult MethodCalledByAjax()
{
}
Upvotes: 0
Reputation: 29
Try this
$(document).ready(function(){
$("#tabs").tabs({
spinner: 'Loading...',
cache: false,
ajaxOptions: {cache: false}
});
});
Upvotes: 2
Reputation: 15853
So, simplifying Eric's analysis, you can control the caching of each tab by setting the 'cache.tabs' data in each tab's anchor element.
// disable cache by default
$("#tabs").tabs({
cache: false,
});
Then after the tab content has been loaded for the first time, you can enable the caching for that tab. I would simply put it in the $(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)
});
Thanks, Eric!
Upvotes: 5
Reputation: 3933
I recently had a use for this as well. Looking into the code, it uses "cache.tabs" with $.data to determine if a tab should be cached. So you just need to grab the element, and set $.data(a, "cache.tabs", false);
I created a quick extension to do just that, assuming the tabs are static. There may be unforseen issues, and can certainly be improved.
(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);
As you can see I assign the old load
method to _load25624
, just some random name, keeping it as a member of the object, and call it in the new load
method after having determined if the tab should be cached. Usage:
$("#tabs").tabs({
cache: true,
itemOptions: [
{ cache: false }
]
});
Will turn on cache for the entire set of items, and turn off cache for just the first item (index 0).
Upvotes: 9