Store Result of Renamed JS.Tree Node

Question

I have an editable tree structure. A user can create, rename and delete individual nodes. Right now, when I choose a node to rename, I store the original value in a variable using this code.

        function rename() {
            var data = null;
        data = $(plBox2).jstree().get_selected(true)[0].text;
        console.log(data);
        }

This function is called when when "Rename" is selected in the context menu. What I want to do is store the new value of that node after it is renamed but I cannot figure it out. My ultimate goal is to send both the old value and the new value to a MySQL table.

Here is my tree and context menu:

$('#plBox2').jstree({
                "checkbox": {
                "keep_selected_style": false
                },
                "core" : {
                    "themes": {
                        "name": "default",
                        "dots": true,
                        "icons": true,
                    },
                    "check_callback": true,
                },                  
                "plugins" : [ 
                        "massload", "wholerow", "contextmenu", "changed", "sort", "dnd",
                ],

                "contextmenu":{         
                    "items": function($node) {
                        var tree = $("#plBox2").jstree(true);
                        return {
                            "Info": {
                                "separator_before": false,
                                "separator_after": false,
                                "label": "Info",
                                "action": function (obj) { document.getElementById('finInfo').style.display='block';
                                }
                            },
                            "Create": {
                                "separator_before": false,
                                "separator_after": false,
                                "label": "Create",
                                "action": function (data) {
                                    var inst = $.jstree.reference(data.reference),
                                    obj = inst.get_node(data.reference);
                                    inst.create_node(obj, {}, "last", function (new_node) {
                                    new_node.data = {file: true};
                                    setTimeout(function () { inst.edit(new_node); },0);
                                    });
                                }
                            },
                            "Rename": {
                                "separator_before": false,
                                "separator_after": false,
                                "label": "Rename",
                                "action": function (obj) { 
                                    tree.edit($node);
                                    rename();
                            }
                        },                         
                            "Remove": {
                                "separator_before": false,
                                "separator_after": false,
                                "label": "Remove",
                                "action": function (obj) { 
                                    tree.delete_node($node);
                                }
                            }
                        };
                    }
                },

HTML:

<div class="2colWrap">
            <div class="col1">
                <div id="plBox2"></div>

            </div>
            <div class="col2">
                <div id="finishBox"></div>
            </div>
        </div>

Thanks!

Answer 1

You can use this statement below!

                 "Rename": {
                        "separator_before": false,
                        "separator_after": false,
                        "label": "Rename",
                        "action": function (obj) {
                            console.log("waht?");
                            currentNode = $node;
                            //tree.edit($node);
                            tree.edit('j1_1', null, function (node, status) {
                                debugger;
                                console.log("old name: " + node.original.text);
                                console.log("new: " + node.text);
                                console.log(arguments);
                            });

                        }
                    },