jQuery-UI tabs - load just once

Question

I'd like the load content of my tabs thru AJAX, but only on the first tab click. Now the tabs gets loaded every time I click on any tab. Is this possible ?

My html

<div id="tabContainer">
<ul>
<li><a href="/Home/Tab1">Tab1</a></li>
<li><a href="/Home/Tab2">Tab2</a></li>
<li><a href="/Home/Tab3">Tab3</a></li>
</ul>
</div>

EDIT

I cannot use the Cache option,because the content in the tabs may change..

Answer 1

You could hide() or remove() the link after performing the load(). Or if you want to allow multiple refreshes of the tab contents you could remove whatever was loaded the first time and re- load().

You could also change the id of the link tag and add a secondary behavior to fall back on.

Answer 2

I think you can catch the event, check if the tab already has content and stop the ajax if it does .

e.g.

$('#example').tabs({
    select: function(event, ui) {
         if($('#' + ui.panel.id).html() != ''){
            return;
         }
    }
});