JS Tree - select_node not working

Question

I have a strange problem with JSTree and Ajax.

I generate my tree using an Ajax / PHP request that generates HTML (with UL, LI, A tags) using ...

$.ajax({ url: 'ajaxTreeView.php?method=edit&partid='+partId, cache: false, success: function(tree) { $('#treeViewer').html(tree); }}); 

and activate JStree in code using ...

 options = { "core": { animation: 120 }, "themes": { theme: 'corral', dots: true }, "types": { "types": { "parent": { "icon": { "image": "images/custom/Legend/node_select.png" } }, "child": { "icon": { "image": "images/custom/Legend/node_select_child.png" } }, "current": { "icon": { "image": "images/custom/Legend/node.png" } } } }, "plugins": [ "html_data", "types", "themes", "ui", "contextmenu", "cookies" ], "ui": { "select_limit" : 1 }, "cookies": { "save_selected" : false } }; $("#tree").jstree(options); 

It seems I can not easily select node. I tried initial_select, but that doesn't seem to work, and also not perfect, as I often want to select node programmatically anyway.

I tried using ...

 $('#tree').jstree("select_node", '#ref565', true); 

This works if I call the function via a hyperlink, but it does not work if I call it after I turn on JStree.

I see from the addition of a warning (all this happens in the Ajax Success procedure) ...

 $('#treeViewer').html(tree); $("#tree").jstree(options); alert('test'); $('#tree').jstree("select_node", '#ref565', true); 

... that the tree did not appear before the warning starts.

I added setTimeOut ...

 $('#treeViewer').html(tree); $("#tree").jstree(options); setTimeout(function() {selectNode(565);},1250); $('#tree').jstree("select_node", '#ref565', true); 

... it works.

I'm obviously stupid. Am I using the wrong syntax? Why do I need to set a delay to select a node?

Please, help.

Answer 1

If you want to select specific nodes initially after loading the tree, you should use the initially_select ui option. You said you tried, but I don’t see it being used in the code sample you provided. Are you sure you are using the correct identifiers?

To select nodes programmatically, you need to wait until the nodes you want to select appear in the DOM first. Instead of using the timeout callback, I assume that it is more appropriate to bind to the loaded.jstree event, which should be called after the tree has finished loading, and all the elements of the tree are in the DOM, and make your programmatic choice there.

Sample code showing usage:

 $(function () { $("#tree") .jstree({ // List of active plugins "plugins" : [ "ui" ], // UI & core - the nodes to initially select and open will be overwritten by the cookie plugin // the UI plugin - it handles selecting/deselecting/hovering nodes "ui" : { // this makes the node with ID node_4 selected onload "initially_select" : [ "#ref565" ] }, // the core plugin - not many options here "core" : { // just open those two nodes up // as this is an AJAX enabled tree, both will be downloaded from the server "initially_open" : [ "#ref565" ] } }) .bind("loaded.jstree", function (e, data) { $('#tree').jstree("select_node", '#ref565', true); }) });