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>