I have a jstree set up (on div id ="surveyManager"). And i have bound the dbclick and rename function to it as under:

 .bind("rename.jstree", function (node, data) {
            edit_node(node,data);
}),

.bind("dblclick.jstree", function (event) {
            //Double Click to Rename
                    jQuery("#surveyManager").jstree("rename");
    })

over here edit_node is a function that have to implement to pass all the node information thru an ajax call.

Is it possible to setup the tree, such that on dbclick, instead of renaming the node, i can just trigger the edit_node(node,data). Maybe another jstree function , or somewhereelse i could define it. Please help

I have a jstree set up (on div id ="surveyManager"). And i have bound the dbclick and rename function to it as under:

 .bind("rename.jstree", function (node, data) {
            edit_node(node,data);
}),

.bind("dblclick.jstree", function (event) {
            //Double Click to Rename
                    jQuery("#surveyManager").jstree("rename");
    })

over here edit_node is a function that have to implement to pass all the node information thru an ajax call.

Is it possible to setup the tree, such that on dbclick, instead of renaming the node, i can just trigger the edit_node(node,data). Maybe another jstree function , or somewhereelse i could define it. Please help

• javascript
• jquery
• jstree

• Umm, call edit_node in the doubleclick event? – Johan Commented Jan 8, 2014 at 15:45
• I think then he may be missing the node and data variables. – Ian Jamieson Commented Jan 8, 2014 at 15:55

4 Answers 4

I am not sure I understand your question, but if you want doubleclick to do a rename try:

    tree.off('dblclick').on('dblclick','.jstree-anchor', renameNode);               

    function renameNode() {
        var instance = $.jstree.reference(this),
        node = instance.get_node(this);
        var old = node.text.replace(/\s+$/, ''); // trim right spaces

        inst.edit(node, null, function(node, success, cancelled) {
            if (!success || cancelled) return;
            if (node.text.replace(/\s+$/, '')==old) return;

            // all good, your rename code here
        });
    }

.off('dblclick') is needed to prevent the default jstree open node on doubleclick

note that if you also bind the tree 'click' event somewhere it will also trigger dblclick. Change 'click' to 'singleclick' and use jquery.singleclick.js

To anyone reading this answer. I don't know if this answer worked on the old jstree or something but it didn't work for me. I implemented click to Edit on this jsfiddle.

Here is the code that worked:

$('#jstree_demo_div2')
  // listen for event
  .on('select_node.jstree', function (e, data) {
    var node = data.instance.get_node(data.selected[0]);
    data.instance.edit(node);
});

I'm answering my own question here, which i figured out by trying a few other things out. Instead of having a rename function on double click for editing, we can pretty much have a select_node and edit item.

the parameters passed are event and data. we can use the event.target to get the nodal information and data is already provided, enabling us to simply call the other function .

.bind("select_node.jstree", function (e,data) {
    var node = $(e.target).closest("li");
       edit_node(node,data);
   });

Thanks for the help

You can trigger defined events using jQuery'a trigger method.

This could be implemented below.

.bind("rename.jstree", function (node, data) {
  edit_node(node,data);
}),

.bind("dblclick.jstree", function (event) {
  //Double Click to Rename
  //jQuery("#surveyManager").jstree("rename");
  jQuery.trigger("rename.jstree");
})