CODEWITHSUNDEEP
jqueryjstree
Henry
Henry

Reputation: 317

creating new nodes in Jstree

I've been trying to create a simple page with a jstree on it that allows to create new nodes. I achieved to create the tree and I can see it in the page, but when I try to create a new node I just get a "false" as result of the instruction that creates the node.

I've watched some examples in internet but I can't find the problem.

Somebody can help me?

Here the entire code

<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-cale=1.0">
        <link rel="stylesheet" href="content/style.css" />
        <script src="script/jquery-1.11.3.min.js" type="text/javascript"></script>
        <script src="script/jstree.min.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="jstree-div"></div>
    </body>

    <script type="text/javascript">
            $('#jstree-div').jstree({
                'core': {
                    'data': [
                       'Simple root node',
                       {
                           'text': 'Root node 2',
                           'state': {
                               'opened': true,
                               'selected': true
                           },
                           'children': [
                                { 'text': 'Child 1' },
                                'Child 2'
                            ]
                       }
                    ]
                },
                'plugins': ['contextmenu'],
                'contextmenu': {
                    'items': function($node) {
                        var tree = $("#jstree-div").jstree(true);
                        return {
                            "Create": {
                                'label': 'Crear',
                                "action": function (data) {
                                    var ref = $.jstree.reference(data.reference);
                                    sel = ref.get_selected();
                                    if (!sel.length) { return false; }
                                    sel = sel[0];
                                    sel = ref.create_node(sel, { "text": "New node" }, 'last');
                                    if (sel) {
                                        ref.edit(sel);
                                    }
                                }
                            }
                        }
                    }
                }
            });
    </script>
</html>

Upvotes: 1

Views: 1862

Answers (2)

vakata
vakata

Reputation: 3886

The problem is that you have not allowed modifications to the structure in your config, add the check_callback option:

'core': {
    'check_callback' : true,
    'data': [

Upvotes: 1

Sietse̩̯ van der Meer
Sietse̩̯ van der Meer

Reputation: 101

Your approach and references seem a little different than mine, what with my node creation being embedded in ajax calls and all. However, I've trimmed down what works for me to what I think should apply to your setup:

contextmenu : {
    items : function (node) {
        var tmp = $.jstree.defaults.contextmenu.items();
        tmp.create.action = function (data) {
            var inst = $.jstree.reference(data.reference),
            obj = inst.get_node(data.reference);
            inst.create_node(obj, {type: "item", text: "some text"}, "last", function (new_node) {
                new_node.state = {
                    is_draggable: true,
                    opened: true,
                    disabled: false,
                    loaded: true
                };
            });
        }
        return tmp;
    }
}

Upvotes: 0

Related Questions