CODEWITHSUNDEEP
javascriptjqueryjstree
coffeeak
coffeeak

Reputation: 3120

JSTree Context menu Create Node is not working

I want to use context menu in jstree to create a node, but when I click on the Create in the context menu, nothing happens.... I get an error:

this.create is not a function

JsTree's init is the following:

var $ = jQuery;
var baseUrl = [location.protocol, '//', location.host, location.pathname].join('');
var ajaxUrl = baseUrl + "?action=load";

$("#tree").jstree({
    'core': {
        'data': {
            "url": ajaxUrl,
            "dataType": "json"
        }
    },

    "plugins": ["themes", "contextmenu", "search"],
    'contextmenu': {
        'items': function($node) {
            return {
                'Create': {
                    "separator_before": false,
                    "separator_after": false,
                    "label": "Create",
                    "action": function(obj) {
                        $node = this.create($node);
                    }
                },

                'Rename': {
                    "separator_before": false,
                    "separator_after": false,
                    "label": "Rename",
                    "action": function(obj) {
                        this.edit($node);
                    }

                },

                "Remove": {
                    "separator_before": false,
                    "separator_after": false,
                    "label": "Remove",
                    "action": function(obj) {
                        this.delete_node($node);
                    }
                }
            };
        }
    }
})

Upvotes: 3

Views: 3254

Answers (2)

sep7696
sep7696

Reputation: 575

you should get node of the tree with var tree = $("#tree").jstree(true);then operate on nodes.

u can use this example.

Upvotes: 0

Vsevolod Krasnov
Vsevolod Krasnov

Reputation: 1522

This happens because this refers to window entity, not jstree.

Approach, which worked for me:

createItem: { 
            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);
                });
            }
        }

Also, you need to set check_callback like this:

'core': {
        'check_callback': true,

Taken from here

Full fiddle

Upvotes: 2

Related Questions