: How to cache AJAX responses (to be displayed the next time the user selects a tab)?

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">
    $(funct开发者_开发问答ion() {
        $("#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)

set cache to true:

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

reference

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.