How can I rename a jsTree node

Question

I am not talking about $(\"#demo1\").jstree(\"rename\",node) which makes the node editable for the user. I am talking about the name being changed within the code.

Answer 1

The recommended method is to use rename_node

$("#demo1").jstree('rename_node', node , text );

Please keep in mind that by default all modifications to the tree are prevented (create, rename, move, delete). To enable them set core.check_callback to true

$('#demo1').jstree({
    'core': {
        'check_callback': true,
        /// rest of the options...
    }
});

Rename your node (alternative, not recommended)

$("#demo1").jstree('set_text', node , text );

Debugging

If you still encounter trouble, you can use this method to get the last error.

$('#demo1').jstree(true).last_error()

For older versions (v1.*)

$("#demo1").jstree('rename_node', [node , text] ); 
$("#demo1").jstree('set_text', [node , text] ); 

See also:

• this jsfiddle for the comparison and example of both methods.
• Interaction with jsTree (how to call API methods)
• API documentation of rename_node
• API documentation of set_text

Answer 2

I believe there is an syntax error with respect to the square braces "[" in the above answer. I use jsTree 3.0.4 and this is the correct syntax -

right -    $("#demo1").jstree('set_text',node,text);
wrong -    $("#demo1").jstree('rename_node', [node , text] );    

Example - 
$("#tree_3").jstree('set_text',"#idSelectorForNode" ,"NewName");

Answer 3

You should turn on the switch to allow the rename operation, such as:

$('#container').jstree({
    'core' : {
        'check_callback' : function (operation, node, node_parent, node_position, more) {
            // operation can be 'create_node', 'rename_node', 'delete_node', 'move_node' or 'copy_node'
            // in case of 'rename_node' node_position is filled with the new node name
            return operation === 'rename_node' ? true : false;
        }

});