jQuery-UI tabs - load just once

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..

$(function () {
        $("#tabs").tabs({
            beforeLoad: function (event, ui) {
                if (ui.tab.data("loaded")) {
                    event.preventDefault();
                    return;
                }
                ui.ajaxSettings.cache = false;
                ui.panel.html('<img src="images/prettyPhoto/dark_square/loader.gif" width="24" height="24" style="vertical-align:middle;"> Loading...');
                ui.jqXHR.done(function() {
                    ui.tab.data( "loaded", true );
                });
                ui.jqXHR.fail(function () {
                    ui.panel.html(
                    "Couldn't load Data. Plz Reload Page or Try Again Later.");
                });
            }
        });
    });

The option "cache" may resolve the problem .

$( ".selector" ).tabs({
  cache: true 
  //some other options 
});

http://docs.jquery.com/UI/Tabs#option-cache

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.

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;
         }
    }
});