CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-tabs
jasonJonas
jasonJonas

Reputation: 11

jQuery UI Tabs Caching v1.10.3

I'm using jQuery UI Tabs to display groups of data. Each tab's content is retrieved using AJAX. The tab content cannot be cached. Prior to v 1.10 we used the Tabs cache property along with the ajaxOptions cache property to control caching. Everything was cool.

With the upgrade to 1.10 these two params have been removed. The functionality can be had by using the beforeLoad event. So this is the new tabs code...

$(function () {
    $("#tripYears").tabs({ 
        active: 0,
        beforeLoad: function( event, ui ) {
            ui.ajaxSettings.cache = false;
        } 
    });
});

This appears to work in every browser except IE. I've tested with IE versions 8 and 10. Chrome, Firefox, Opera and Safari don't cache the tab data at all. Was hoping someone could point me in the right direction.

Upvotes: 1

Views: 2087

Answers (1)

philw
philw

Reputation: 687

With default Ajax tab loading, every time you switch back to a tab it reloads the Ajax. The "cache" parameter was there to prevent that, but it's been deprecated now but as jQueryUI point out you can roll your own with beforeLoad.

You seem to be trying to get the browser to cache the Ajax itself. However the tab's contents are already there in the DOM, so really you don't need to make an Ajax request at all, when you return to a previously loaded tab.

You just want to stop jQuery re-loading that tab's content. So something like this will prevent that: 

$("#tabs").tabs({
   beforeLoad: function (event, ui) {
        if ($(ui.panel).html()) {    // If content already there...
            event.preventDefault();      // ...don't load it again.
        }
    }
});

That's entirely inside jQueryUi/ jQuery so isn't dependent on any browser Ajaxy stuff.

Upvotes: 6

Related Questions