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