[jQuery UI Tabs] : How to cache AJAX responses (to be displayed the next time the user selects a tab) ?

Question

I populate my tabs contents using AJAX calls with the tabs widget from jQuery UI library.

My code loks like that :

<script type="text/javascript">
    $(function() {
        $("#tabs").tabs({
            load: function(event, ui) { afterLoadProcessing(); }
        });
    });
</script>
...
<div id="tabs">
<ul>
  <li><a href="url1">tab1</a></li>
  <li><a href="url2">tab2</a></li>
</ul>
</div>

It works fine and each time I click on the tab, the tab content is populated by the response of the AJAX call.

I would like to cache the response of the AJAX call, such that the second time I click on a tab, it will directly displayed the last response (cached eventually).

Is it possible? (I'm sure it is...). If yes, what is the easiest way to do it? (code snippets are welcomed)

Answer 1

set cache to true:

$("#tabs").tabs({
    load: function(event, ui) { afterLoadProcessing(); },
    cache : true
});

reference

Answer 2

There are two places you can specify caching on the tabs itself or, using ajaxOptions, on the ajaxCalls. I would try using cache: true on the tabs to see if that works first, then specify ajax caching as well via the ajaxOptions option on the tab set up. You may need both.