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


        

Answer 1

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!