CODEWITHSUNDEEP
jquerycontextmenujstree
Alun
Alun

Reputation: 143

jsTree create node, renaming the node title using JS prompt

is possible to rename the node title using the value from the java script prompt after the node created ?

![user right click and create new node on the tree][1] after create the new node, user will automatically go to pop-up menu and asked to input the node name

user create new node : https://i.sstatic.net/X6hIl.png

user prompted to input new node name :https://i.sstatic.net/WJmJw.png

and the node name will automatically renamed from the value from the user

the point of doing this is because the pop-up screen actually will do the query operation from the database and send back particular string as a node title

these are the script to get the pop-up from the tree contextmenu.

    $(function () {
        $("#demo1").jstree({ 
    "plugins" : [ "themes", "html_data", "crrm", "contextmenu" ]
        })
        .bind( "rename_node.jstree", function (e, data) {    
    var data = prompt("enter node name ");
        });
    });

Upvotes: 1

Views: 2943

Answers (1)

MMeah
MMeah

Reputation: 1042

There is no need to bind to the rename_node event handler. You can rewrite the contextmenu "rename" object to run your own custom function.

$(function () {
 $("#demo1").jstree({   
    "contextmenu" : {
        items : { // Could be a function that should return an object like this one
            "create" : false,
            "rename" : {
                            "_class"            : "myClass",
                            "separator_before"  : false,
                            "separator_after"   : false,
                            "label"             : "Rename Node",
                            "action"            : function (obj) {
                                                    //Do some action here or pass the object to another function
                                                    //ex: myFunc(obj);
                                                    $(obj).find("a:first").text("My new node label.");
                                                }
                        },
            "remove" : false,
            "ccp" : false
        }
    },
    "plugins" : [ "themes", "html_data", "crrm", "contextmenu" ]
 });
});

Upvotes: 2

Related Questions