Impossible de créer un objet jsTree à l'intérieur d'un onglet jQueryUI

Je ne parviens pas à créer un objet jsTree dans un onglet de l'interface utilisateur jQuery. Si je crée le jsTree en dehors de l'onglet, cela fonctionne très bien. Est-ce que quelqu'un sait si jsTree est incompatible avec l'onglet jQuery UI?Impossible de créer un objet jsTree à l'intérieur d'un onglet jQueryUI

Ma page est ci-dessous. Si je remplace la ligne suivante

var treeContainer = jQuery("#tabTree");

avec:

var treeContainer = jQuery("#pageTree");

Ensuite, les charges d'arbres fines dans la page sous le contrôle onglet.

<body> 
    <div id="myTabs"> 
     <ul> 
      <li><a href="tab1.html">Tab 1</a></li> 
      <li><a href="tab2.html">Tab 2</a></li> 
      <li><a href="tab3.html">Tab 3</a></li> 
     </ul> 
    </div> 

    <div id="pageTree"></div> 

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.js" type="text/javascript"></script>   
    <script type="text/javascript" src="jsTree/jquery.tree.js"></script> 
    <script type="text/javascript">  
     $(function(){ 

      $("#myTabs").tabs(); 

      var treeContainer = jQuery("#tabTree"); 
      var treeData = { 
       data: { 
        type : "json", 
        opts : { 
         static : [ 
          { 
           data: "A node", 
           children: [ 
            { data : "Child node 1" }, 
            { data : "Child node 2" }, 
            { data : "Child node 3" } 
           ] 
          } 
         ] 

        } 
       } 
      }; 
      treeContainer.tree(treeData); 
     });  
    </script> 
</body>

Voici le contenu de tab3.html:

<div id="tab3Container">   
    <div id="tabTree"></div> 
</div>

Source

2010-04-02 Raul Agrait

Pouvez-vous s'il vous plaît nous montrer du code? –

@Justin Ethier: Question mise à jour avec le code. –

Le contenu n'est pas présente dans ces onglets jusqu'à ce que vous cliquez sur l'onglet pour le charger, le sélecteur jQuery("#tabTree") ne Quelque chose à faire correspondre, aucun élément correspondant à ce sélecteur n'existe encore. Vous devez exécuter ce code lorsque cette page ajax est chargé, comme ceci:

var treeLoaded = false; 
$("#myTabs").bind("tabsload", function(event, ui) { 
    if(!treeLoaded && jQuery("#tabTree", ui.panel).length) { 
    var treeContainer = jQuery("#tabTree"); 
    var treeData = { 
     data: { 
      type : "json", 
      opts : { 
       static : [ 
        { 
         data: "A node", 
         children: [ 
          { data : "Child node 1" }, 
          { data : "Child node 2" }, 
          { data : "Child node 3" } 
         ] 
        } 
       ] 

      } 
     } 
    }; 
    treeContainer.tree(treeData); 
    treeLoaded = true; 
    } 
});

L'événement tabsload, described here, court lorsque le contenu ajax est chargé. Le code ci-dessus vérifie si votre id="tabTree" était dans ce contenu chargé, et si c'est le cas et l'arbre n'a pas encore été construit, le construit.

Source

2010-04-02 01:06:05

Impossible de créer un objet jsTree à l'intérieur d'un onglet jQueryUI

Répondre

Questions connexes