CODEWITHSUNDEEP
javascriptjstree
Jerry Meng
Jerry Meng

Reputation: 1506

JsTree Click Event

Hi I am new to JsTree and I got a question on event. Let's call the tree structure stuff as LeftSide and the content rendered after you click one node on the tree as RightSide. What I can do is that you click one node at LeftSide then there is a subpage will be rendered at RightSide.

Now, what I need is to click something on the RightSide (This "something" can be a node name on the LeftSide) and it will render a subpage on the RightSide as same as if you click that node on the LeftSide.

I am not sure whether I make my question clear.

The point is that I don't know how to describe my question and search it one the web. So if you don't know the exact answer, you you just tell me which direction I should search for it. (If you tell me to read the official document, please specify which part rather than the whole doc.)

Appreciate for any help!!!

Upvotes: 2

Views: 14422

Answers (2)

Rocky Hu
Rocky Hu

Reputation: 1346

I don't think the "select_node.jstree" event is the best solution, because when you refresh the tree, it also will be fire. The below snippet code is the way that I use：

$("#categories_tree").on("click", ".jstree-anchor", function(e) {
   var id = $("#categories_tree").jstree(true).get_node($(this)).id;
})

Edit: fixed a close bracket

Upvotes: 3

Pete Kirkham
Pete Kirkham

Reputation: 49311

You want to listen for the select_node.jstree event, and get the selected node(s). You can then do what you want to the right side of your page.

$("#jstree_id").on('select_node.jstree', function(e) {
    // gather ids of selected nodes
    var selected_ids = [];
    $("#jstree_id").jstree('get_selected').each(function () { 
        selected_ids.push(this.id); 
    }); 
    // do summit with them
    $('#RightSide').text('selected '+selected_ids);
});

Edited as bind has been deprecated in favour of on.

Upvotes: 2

Related Questions