JQuery UI Tabs caching

Question

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?

Answer 1

Try this

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

Answer 2

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!

Answer 3

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).

Answer 4

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