Changing node text in jsTree

Question

I'm a longtime JavaScript coder but new to jQuery. I'm using jsTree and need to change a node name. I've searched for and tried many examples from this site and others, but can't find a solution that works. Basically, I'm trying to change a tree node name but it always renames to 'undefined'. In the following example, whenever a node is selected the text should change.

The block of code that is supposed to make the change is:

    $('#catTree')
    // listen for event
    .on('changed.jstree', function (e, data) {
        var node = data.instance.get_node(data.selected[0])
        var newText = "Some new text";
        $('#catTree').jstree('rename_node', [node , newText] );
    })

In case is it something obvious that I'm just missing, here the whole example:

    <div id="catTree" class="demo"></div>
<script>
var catData = [
     { "id" : "allCategories", "parent" : "#", "type" : "catRoot", "text" : "All categories" },
     { "id" : "category1", "parent" : "allCategories", "type" : "category", "text" : "Category 1" },
     { "id" : "category2", "parent" : "allCategories", "type" : "category", "text" : "Category 2" },
     { "id" : "category3", "parent" : "allCategories", "type" : "category", "text" : "Category 3" },
]

$.jstree.defaults.core = {
        strings      : false,
        check_callback  : true,
        animation    : 100,
        aria_roles    : true,
        multiple    : false,
        themes      : {
            name      : false,
            url        : true,
            dots      : true,
            icons      : true,
            dir        : false
        },
        base_height    : false
    };

$('#catTree')
    // listen for event
    .on('changed.jstree', function (e, data) {
        var node = data.instance.get_node(data.selected[0])
        var newText = "Some new text";
        $('#catTree').jstree('rename_node', [node , newText] );
    })

$(function () {
    $("#catTree").jstree({ 
        'core' : {
            'data' : catData
        },
        "types" : {
                "category" : { "icon" : "none", "max_children" : 1, "valid_children" : ["pasteText"] },
        },
        "crrm" : { 
            "move" : {
                "check_move" : function (m) { 
                    var p = this._get_parent(m.o);
                    if(!p) return false;
                    p = p == -1 ? this.get_container() : p;
                    if(p === m.np) return true;
                    if(p[0] && m.np[0] && p[0] === m.np[0]) return true;
                    return false;
                }
            }
        },
        "dnd" : {
            "drop_target" : false,
            "drag_target" : false
        },
        "plugins" : [ "themes", "html_data", "crrm", "dnd", "types" ]
    });
});
</script>

I'm using jsTree v3.2.1 and jQuery v2.1.4

score 4 · Accepted Answer · answered Nov 08 '15 at 01:41

you don't have to get node because you can access it from data variable.
call rename_node as $('#catTree').jstree('rename_node', data.node, newText) instead of $('#catTree').jstree('rename_node', [node , newText] )
also move your .on code to the main jstree init function

So the code will look like below. See example JS Fiddle.

$(function () {
    $("#catTree").on('changed.jstree', function (e, data) {
        var newText = "Some new text";
        $('#catTree').jstree('rename_node', data.node, newText);
    })
    .jstree({ 
        'core' : {
            'data' : catData
        },
        "types" : {
            "category" : { "icon" : "none", "max_children" : 1, "valid_children" : ["pasteText"] },
        },
        "crrm" : { 
            "move" : {
                "check_move" : function (m) { 
                    var p = this._get_parent(m.o);
                    if(!p) return false;
                    p = p == -1 ? this.get_container() : p;
                    if(p === m.np) return true;
                    if(p[0] && m.np[0] && p[0] === m.np[0]) return true;
                    return false;
                }
            }
        },
        "dnd" : {
            "drop_target" : false,
            "drag_target" : false
        },
        "plugins" : [ "themes", "html_data", "crrm", "dnd", "types" ]
    });
});

Thanks, that's just what I needed. [Somewhere](http://stackoverflow.com/questions/12434150/renaming-a-tree-node-dynamically-outside-of-contextmenu-in-jstree) I saw an example that passed the node and new value as an array. That's wrong. They should be passed as separate arguments. — Chuck Baker, Nov 08 '15 at 19:24

Changing node text in jsTree

1 Answers1