Onglets jQuery-UI - charger une seule fois

Question

Je voudrais que le contenu de la charge de mes onglets par AJAX, mais seulement sur le premier onglet cliquez. Maintenant, les onglets sont chargés chaque fois que je clique sur un onglet. Est-ce possible ?

Mon 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

Je ne peux pas utiliser l'option de cache, car le contenu dans les onglets peuvent changer ..

Answer 1

Vous pourriez hide() ou remove() le lien après avoir effectué la charge(). Ou si vous souhaitez autoriser plusieurs actualisations du contenu de l'onglet, vous pouvez supprimer tout ce qui a été chargé la première fois et recharger().

Vous pouvez également modifier l'ID de la balise de lien et ajouter un comportement secondaire sur lequel se replier.

Answer 2

Je pense que vous pouvez attraper l'événement, vérifiez si l'onglet contient déjà du contenu et arrêtez l'ajax si c'est le cas.

par exemple.

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

Answer 3

L'option «cache» peut résoudre le problème.

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

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

Answer 4

$(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.success(function() { 
        ui.tab.data("loaded", true); 
       }), 
       ui.jqXHR.error(function() { 
        ui.panel.html(
        "Couldn't load Data. Plz Reload Page or Try Again Later."); 
       }); 
      } 
     }); 
    });