Nanda Kumar Nanda Kumar - 2 months ago 11
jQuery Question

JsTree - Select node when the panel is hidden

I have a JS tree and below is the html and the js to select a node on click of a button. Now, I want to know if there is any way to select a node if the tree is placed in a collapsible panel and is hidden ( div -> #tree) and the button is placed outside. I tried but in vain.

Assuming at first only the parent is visible.

<div>
<button onclick="select()">
Sample
</button>
<div id="tree" style="width:40%; float:left;"></div>
</div>

$(function () {
$("#tree")
.jstree({
"core": {
"data": [{"text":"Parent","children":[{"id" : "nodeId", "text":"Child1"}]}]
}
});
});

function select() {
$("#tree").jstree(true).select_node("nodeId");
}

Answer

It all works fine as far as you place your javascript before the markup. Otherwise the button doesn't know about the select function yet since it is declared later. You can see this error on browser console.

Here is how you can make it work - JS Fiddle demo.