Open branch when clicking on a node?

Question

I'm stuck with jsTree here. So far it works and i can browse and expand nodes with the [+] icon and open pages when clicking a node, BUT i still want it to expand all the immediate nodes whenever someone clicks on a node.

i had a look at around for at least 2 hours but couln't find anything. the official website is not very helpfull because they don't have enough examples, and its not very well documented. had a look at this one, but didn't work for me either: http://luban.danse.us/jazzclub/javascripts/jquery/jsTree/reference/_examples/2_operations.html

i didn't even get an error message in firebug

so here is how my code looks right now, tree init:

$(function () {
    $("#jstree").jstree({
    ....

function triggered by click on node

.delegate("a","click", function (e) { 
    //click on node
    var page_id = $(this).parent().attr("page_id");
    var idn = $(this).parent().attr("id").split("_")[1];
    /*
            dosnt seem to work either...
    $(this).jstree("openNode", $("#node_"+idn));
    $(this).jstree("openNode", "#node_"+idn);
    */
    page = "index.php?page_id="+page_id;
    //location.href = page;
})

.bind didnt work either:

$(this).bind("open_node.jstree", function (event, data) { 
    if((data.inst._get_parent(data.rslt.obj)).length) { 
        data.inst._get_parent(data.rslt.obj).open_node(this, false); 
    } 
})

does anyone see what i'm missing here...?

justind · Answer 1 · 2014-03-26T16:49:31.920

38

You need to bind to select_node.jstree and call toggle_node on the tree instance when it's triggered:

For jsTree versions < 3.0:

$("#your_tree").bind("select_node.jstree", function(event, data) {
  // data.inst is the tree object, and data.rslt.obj is the node
  return data.inst.toggle_node(data.rslt.obj);
});

For jsTree versions >= 3.0

$("#your_tree").bind("select_node.jstree", function (e, data) {
    return data.instance.toggle_node(data.node);
});

edited Mar 26 '14 at 16:49

answered Oct 14 '11 at 19:04

justind

1,259
13
16

Worked, thanks! But the parameters are different in >= 3. See: http://www.jstree.com/api/#/?q=select_node.jstree&f=select_node.jstree It's `function (node, selected, event)` now. – Nick Russler Oct 07 '14 at 16:17
Nick, can you expand on the updated version of the function you used so that I may update the answer? In your change with the new arguments, what is the new toggle_node call? `data.instance.toggle_node(node);` ? – justind Oct 09 '14 at 17:58

score 5 · Answer 2 · answered Feb 01 '14 at 14:32

5

With a newer version of jsTree (3.0.0 according to jsTree.js), i had to change the code provided by @justind a bit to work:

$("#jstree").bind("select_node.jstree", function (e, data) {
    return data.instance.toggle_node(data.node);
});

answered Feb 01 '14 at 14:32

GDP

8,109
6
45
82

I'd prefer to sticking with the API using `$(e.currentTarget).jstree('toggle_node', data.node)` instead of internal things like `.instance` – Hashbrown Oct 18 '19 at 08:31

score 1 · Answer 3 · answered Dec 28 '10 at 09:10

I use this (casoUso is the page linked, fInvocaCasoUso is a function to make the call).

  $("#demo1").bind("select_node.jstree", function (e, data)
                    {
                        if (data.rslt.obj.attr("casoUso")!=undefined)
                        {
                            fInvocaCasoUso(data.rslt.obj.attr("casoUso"));
                        }
                        else
                        {
                            $("#demo1").jstree("toggle_node",data.rslt.obj);
                        }
                    });

If the node has a link, it opens, if not, the sub-tree is opened. Anyway, you should be able to combine both sides of "if" to open the branch and execute your link. Maybe executing:

       $("#demo1").jstree("toggle_node",data.rslt.obj);
       fInvocaCasoUso(data.rslt.obj.attr("casoUso"));

Would do it...

Open branch when clicking on a node?

3 Answers3

Linked