I am attempting to obtain the text value of the newly created node AFTER the user edits the name of the new node and presses Enter.

When I do this:

        .on('create_node.jstree', function (e, data) {
            var id = data.node.id;
            alert($('#' + id).text());
        });

All I get is "New Node" in my alert. I have been scouring this site for an answer as well as perusing the API documentation on the jstree website for some time, But they provide few examples, so as a jQuery novice, it is pretty difficult for me to understand.

So, my question is which event do I actually need to program against to be able to obtain the ID of the node that was just created? is it the changed.jstree event? If so, how do I utilize this?

EDIT Might help to mention I am attempting this through a context menu; Here is how I have my "create" item set up:

                items = {
                    "create": {
                        "label": "New Category",
                        "action": function (obj) {
                            $node = tree.create_node(node);
                            tree.edit($node);
                        }
                    }
                }

I am attempting to obtain the text value of the newly created node AFTER the user edits the name of the new node and presses Enter.

When I do this:

        .on('create_node.jstree', function (e, data) {
            var id = data.node.id;
            alert($('#' + id).text());
        });

All I get is "New Node" in my alert. I have been scouring this site for an answer as well as perusing the API documentation on the jstree website for some time, But they provide few examples, so as a jQuery novice, it is pretty difficult for me to understand.

So, my question is which event do I actually need to program against to be able to obtain the ID of the node that was just created? is it the changed.jstree event? If so, how do I utilize this?

EDIT Might help to mention I am attempting this through a context menu; Here is how I have my "create" item set up:

                items = {
                    "create": {
                        "label": "New Category",
                        "action": function (obj) {
                            $node = tree.create_node(node);
                            tree.edit($node);
                        }
                    }
                }

• javascript
• jquery
• jstree

2 Answers 2

The event you might be looking for is rename_node.jstree. It would look like:

.on('rename_node.jstree', function (e, data) {
  //data.text is the new name:
  alert(data.text);
});

  tree.on('rename_node.jstree', function (e, data) {
  //data.text is the new name:

  var nodeId = data.node.original.id;
  if (nodeId == undefined) {
      console.log('New Node Added', data);
  } else if (data.old !== data.text) {
      console.log('Node Renamed', data);
  }});