jQuery charger la page une seule fois sur l'onglet cliquez sur

Question

J'ai une page avec des onglets dessus et en cliquant sur certains onglets, d'autres pages sont chargées dynamiquement. Le seul problème est que ces pages se chargent à chaque fois que les onglets sont cliqués. Comment les faire charger une seule fois, au premier clic?

Le code que j'utilise est le suivant:

$(document).ready(function(){ 
    $(".tab-content").hide(); 
    $("#one").show(); 

    $("a.tab-name").click(function(){ 
     $(".tab-name-active").removeClass("tab-name-active"); 
     $(this).addClass("tab-name-active"); 
     $(".tab-content").fadeOut(); 
     var content_show=$(this).attr("title"); 

     if (content_show === 'three') { 
      $("#"+content_show).load('new-page.php', function() { 
       $("#sorttable").tablesorter({ 
        headers: {0: {sorter: false}} 
       }); 
      }); 
     } 
     else if (content_show === 'four') { 
      $("#"+content_show).load('new-page-2.php'); 
     } 

     $("#"+content_show).delay(100).fadeIn('slow'); 

     return false; 
    }); 
}); 

Merci!

Answer 1

utilisez .data() pour enregistrer une valeur booléenne.

$(document).ready(function(){ 
    $(".tab-content").hide(); 
    $("#one").show(); 

    $("a.tab-name").data('loaded',false).click(function(){ 
     var $this = $(this); 
     $(".tab-name-active").removeClass("tab-name-active"); 
     $this.addClass("tab-name-active"); 
     $(".tab-content").fadeOut(); 
     var content_show= this.title; 

     if (! $this.data('loaded')) { 

      if (content_show === 'three') { 
      $("#"+content_show).load('new-page.php', function() { 
       $("#sorttable").tablesorter({ 
        headers: {0: {sorter: false}} 
       }); 
       $this.data('loaded',true); 
      }); 
      } 
      else if (content_show === 'four') { 
      $("#"+content_show).load('new-page-2.php', function(){ 
       $this.data('loaded',true); 
      }); 
      } 

     } 

     $("#"+content_show).delay(100).fadeIn('slow'); 

     return false; 
    }); 
}); 

Answer 2

Je viens de faire une fonctionnalité comme celle-ci hier. La façon dont je l'ai fait était d'ajouter une classe "still_loading" dans un div arbitraire (disons votre conteneur div) puis quand l'onglet se charge enfin, retirez cette classe à nouveau.