JQuery-UI Tabs - Download Only Once

Question

I would like to download the contents of my tabs via AJAX, but only on the first tab click. Now tabs load every time I click on any tab. Is it 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 contents on the tabs may change.

Answer 1

You can hide () or remove () the link after loading (). Or if you want to allow multiple updates to the contents of the tab, you can delete everything that was downloaded the first time and reload ().

You can also change the link tag identifier and add secondary behavior to it.

Answer 2

 $(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."); }); } }); }); 

Answer 3

The cache option may solve the problem.

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

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

Answer 4

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

eg.

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