Click on jstree node, rebuild tree with that node as the root

Question

I think the subject is reasonably clear. :)

I'm a jstree newbie and have tried to parse the docs, but I'm getting a bit stuck with this one. I have the following code:

$("#tree").jstree({
   "json_data" : {
       "data" : [
           tree.company
       ]
   },
   "themes" : {
       "theme" : "smb",
       "dots" : false,
       "icons" : true
   },
   "plugins" : [ "themes", "json_data", "ui" ]
}).bind("select_node.jstree", function (event, data) {
   $('#tree').jstree.refresh(data.inst.get_selected());  // FIXME
});

The tree loads and displays just fine, but when I click on the node that I want to become the new root of the displayed tree, I get an error at the line marked FIXME. I've tried all kinds of things with no joy, and would really appreciate some help. What am I doing wrong?

Answer 1

If the entire tree needs to be refreshed, then the tree's container can be referenced and refreshed.

.bind("select_node.jstree", function (event, data) {
    $.jstree._reference(data.inst.get_container()).refresh(); //(data.inst.get_selected());  // FIXME
}).bind("refresh.jstree", function (event, data) {
    alert("Refreshed!");
});

If just the node needs to be referenced in select_node: data.rslt.obj[0];

Or another round about way to get it (same node as above): $.jstree._reference(data.inst.get_container()).get_selected();

You may also need to destroy and rebuild the tree: $.jstree._reference("#tree").destroy(); I know this may seem wasteful, but you are replacing the root node anyways.

Answer 2

I'm pretty sure the reason you're getting the error on that line is because you've got your syntax a little off in this line:

$('#tree').jstree.refresh(data.inst.get_selected());

Try this instead:

$('#tree').jstree("refresh", data.inst.get_selected());