2010-03-29 12 views
2

Je souhaite appeler une méthode de rappel qui peut ou non être implémentée dans les pages chargées en tant que contenu Ajax par les onglets jQuery. En d'autres termes, j'ai un ensemble d'onglets jQuery qui chargent le contenu rendu dans les fichiers JSP. Certains de ces fichiers contiennent du contenu Ajax supplémentaire, d'autres non.Appel d'une fonction définie dans une page de contenu chargée par les onglets jQuery

Ce que je pourrais faire est:

$(document).ready(function() { 
    $("#menu").tabs({ 
     cache: false, 
     ajaxOptions: {cache: false}, 
     load: function(event, ui) { 
      if (ui.index == index_of_tab_with_additional_content) { 
       //call code defined in other places and embedded using <script> tags 
      } 
     } 
    }); 
}); 

Mais cela a quelques inconvénients - tous les callbacks doivent être déclarés dans les scripts intégrés dans ma page de onglets, ainsi que tout ce qu'ils peuvent dépendre - pas élégant! De plus, j'aimerais pouvoir appeler le même rappel, afin d'éviter une instruction page par page if/else. En bref, je voudrais avoir quelque chose comme

load: function(event, ui) { 
     callback(); //Each tab would implement this differently, or not at all 
    } 
} 

Malheureusement, je ne pouvais pas comprendre comment appeler des fonctions de script déclarées dans le contenu. Comme indiqué dans les autres threads, Javascript n'est pas chargé par jQuery.

Apparemment, une option doit être définie pour cela, mais je n'ai pas pu trouver laquelle.

Et si l'option était définie et JS chargé, comment accéder aux fonctions? Serait-ce ui.panel.funcname(); ?

Merci, ES

Répondre

2

JQuery ne se charge pas contenu du script situé dans l'en-tête du document en cours de chargement via AJAX, mais il sera contenu du script de charge du corps. Le moyen le plus simple de gérer ceci si vous ne voulez pas le code sur la page principale (en utilisant les gestionnaires live) est que votre page principale charge tous les fichiers script externes requis par les onglets et que le contenu de chaque onglet contienne le "callback" mécanisme pour ce qui doit être fait lorsque l'onglet est chargé. Vous devez être prudent, sachant que tous les onglets peuvent être chargés dans le DOM, ce qui nécessite des distinctions de noms entre les onglets et, peut-être, qualifier les sélecteurs pour qu'ils soient relatifs au conteneur d'onglets, mais c'est faisable.

Ex.

<html> 
    <head> 
     ... 
     <script type="text/javascript"> 
      // I'm not going to be loaded via AJAX 
     </script> 
    </head> 
    <body> 
    <div id="homeTab" class="tab-content"> 
     ... 
     <a href="#" class="clickable button">Click Me</a> 
     ... 
    </div> 
    <script type="text/javascript"> 
     $(function() { 
      // here be stuff which runs when the tab is loaded 
      var $tab = $('#homeTab'); 
      $('a.button',$tab).click(function() { 
       ...do something... 
       return false; 
      }); 
     }); 
    </script> 
    </body> 
    </html> 
+0

Grats sur 100k tvan :) –

+0

@Nick - merci. – tvanfosson