Capturing a newly created node using the JSTree context menu

Question

I am trying to capture the name of a newly created node using jstree contextmenu. I can write the name of the parent node that I am adding a new node under (with obj.text ()), however I really need the name of the newly created node.

So, somehow there should be an onChange event that can be raised in the jstree contextmenu that fires after the user presses Enter on the newly created node?

Any ideas? I enclosed the contextmenu code:

}).jstree({ json_data: { data: RBSTreeModel, ajax: { type: "POST", data: function (n) { return { NodeID: n.attr("id").substring(4), Level: n.attr("name").substring(7) }; }, url: function (node) { return "/Audit/GetRequirementsTreeStructure"; }, success: function (new_data) { return new_data; } } }, contextmenu: { items: function($node) { return { createItem : { "label" : "Create New Branch", "action" : function(obj) { this.create(obj); alert(obj.text())}, "_class" : "class" }, renameItem : { "label" : "Rename Branch", "action" : function(obj) { this.rename(obj);} }, deleteItem : { "label" : "Remove Branch", "action" : function(obj) { this.remove(obj); } } }; } }, plugins: ["themes", "json_data", "ui", "crrm", "contextmenu"] }); 

Answer 1

You can bind to the create.jstree event, which will fire after the node is created. In the callback of this event, you will have access to the newly created node and you can undo / cancel the create node action if you choose. There is not enough documentation for it, but there is an example on the demo page . Here is another example from my code:

 }).jstree({... You jstree setup code...}) .bind("create.jstree", function(e, data) { // use your dev tools to examine the data object // It is packed with lots of useful info // data.rslt is your new node if (data.rslt.parent == -1) { alert("Can not create new root directory"); // Rollback/delete the newly created node $.jstree.rollback(data.rlbk); return; } if (!FileNameIsValid(data.rslt.name)) { alert("Invalid file name"); // Rollback/delete the newly created node $.jstree.rollback(data.rlbk); return; } .. Your code etc... }) 

Answer 2

Based on Bojin Li's answer, it seems that the latest version of jsTree uses the create_node event instead of create:

 }). jstree ({... You jstree setup code ...})
       .bind (" create_node .jstree", function (e, data) {
         ...
        });