CODEWITHSUNDEEP
jqueryjstree
akash prasad
akash prasad

Reputation: 45

jstree Context menu not working

I am loading the jstree with ajax lazy loading and also i have been implemented the context menu plugin of the jstree. So when the context menu is clicked getting the error as

Uncaught TypeError: Cannot read property 'get_node' of null

seems like the jstree is not fully loaded and trying to use the context menu.

Any suggestion how to use the context menu after loading the jstree.

Edit: here is the snippet which i use to load jstree

loadTree: function() {
     $j('#JSTree').jstree({
         'core' : {
             check_callback : true,
             data : function(obj, cb) {
                 var path = this.get_path(obj,'/') || '/';
                 ecpmServices.getTreeNode(path).then(function(response){
                       var treeData = response.data;
                       if(typeof treeData === 'object') {
                              treeData = parseTree(treeData, obj);
                              console.log(treeData);
                              cb.call(this,treeData);
                       }
                 });
             }
         },
         "contextmenu" : {
             items : function(node) {
                 var tmp = $j.jstree.defaults.contextmenu.items();
                 delete tmp.create.action;
                 delete tmp.rename;
                 delete tmp.ccp;
                 tmp.create.label = "New";
                 tmp.create.submenu = {
                     create_folder: {
                         label: "Folder",
                         separator_after: true,
                         action: function (data) {
                             var inst = $j.jstree.reference(data.reference);
                             console.log(data.reference);
                                var obj = inst.get_node(data.reference);
                                 inst.create_node(obj, { type : "folder", text : "New folder" }, "last", function (new_node) {
                                 setTimeout(function () { inst.edit(new_node); },0);
                             });
                         }
                     },
                     create_file : {
                         label: "File",
                         action: function (data) {
                             var inst = $j.jstree.reference(data.reference),
                             obj = inst.get_node(data.reference);
                             inst.create_node(obj, { type : "file", text : "New file" }, "last", function (new_node) {
                                 setTimeout(function () { inst.edit(new_node); },0);
                             });
                         }
                     }
                 };
                 if(this.get_type(node) === "file") {
                     delete tmp.create;
                 }
                 return tmp;
             }
         },
         "plugins" : ["contextmenu"]
     });
 };

Thanks in advance

Upvotes: 0

Views: 2235

Answers (1)

Asif Nowaj
Asif Nowaj

Reputation: 356

You can load the tree after you receive the tree data. Like below

<script type="text/javascript">
    $(function () {
       //Call your ecpmServices.getTreeNode(path).then(function(response){
       //var treeData = response.data;   
       // if success then call loadTree(treeData) with treeData
       // if failure handle it                       
    });
</script>

Then your code will look like 

 loadTree: function(treeData) {
 $('#JSTree').jstree({
     'core' : {
         check_callback : true,
         data : treeData             
     },
     "contextmenu" : {
         items : function(node) {
             var tmp = $j.jstree.defaults.contextmenu.items();
             delete tmp.create.action;
             delete tmp.rename;
             delete tmp.ccp;
             tmp.create.label = "New";
             tmp.create.submenu = {
                 create_folder: {
                     label: "Folder",
                     separator_after: true,
                     action: function (data) {
                         var inst = $j.jstree.reference(data.reference);
                         console.log(data.reference);
                            var obj = inst.get_node(data.reference);
                             inst.create_node(obj, { type : "folder", text : "New folder" }, "last", function (new_node) {
                             setTimeout(function () { inst.edit(new_node); },0);
                         });
                     }
                 },
                 create_file : {
                     label: "File",
                     action: function (data) {
                         var inst = $j.jstree.reference(data.reference),
                         obj = inst.get_node(data.reference);
                         inst.create_node(obj, { type : "file", text : "New file" }, "last", function (new_node) {
                             setTimeout(function () { inst.edit(new_node); },0);
                         });
                     }
                 }
             };
             if(this.get_type(node) === "file") {
                 delete tmp.create;
             }
             return tmp;
         }
     },
     "plugins" : ["contextmenu"]
 });
};

You can get a hint from https://everyething.com/Example-of-simple-jsTree-with-dynamic-JSON-data

Upvotes: 2

Related Questions