Home/ Questions/Q 701223
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T03:35:09+00:00

I am not able to create a jsTree inside of a jQuery UI tab.

  • 0

I am not able to create a jsTree inside of a jQuery UI tab. If I create the jsTree outside of the tab, it works fine. Does anybody know if jsTree is incompatible with jQuery UI tab?

My page is below. If I replace the following line

var treeContainer = jQuery("#tabTree");

with:

var treeContainer = jQuery("#pageTree");

Then the tree loads fine in the page underneath the tab control.

<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>

Here are the contents of tab3.html:

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The content in those tabs isn’t present until you click the tab to load it, so the selector jQuery("#tabTree") doesn’t have anything to match, no elements matching that selector exist yet. You need to run this code when that ajax page is loaded, like this:

    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;
  }
});

    The tabsload event, described here, runs when ajax content is loaded. The code above checks if your id="tabTree" was in that loaded content, and if so and the tree hasn’t been built yet, builds it.

    • 0