jqueryjstree

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>
Solution

  • 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': [