Create Functionality in Context Menu of jsTree not working

Question

New nodes won't be created when 'types' plugin is defined.

Please look at this fiddle. I'm unable to create new Nodes in the tree. http://jsfiddle.net/z8L5r9w3/1/

$('#jstree').jstree({
"core" : {
    "check_callback" : true,
    "data" : [
        { "text" : "Branch 1", "type" : "branch", "children" : [
            { "text" : "leaf 1.1", "type" : "leaf" },
            { "text" : "leaf 1.2", "type" : "leaf" },
            { "text" : "leaf 1.3", "type" : "leaf" }
           ]
        },
        { "text" : "Branch 2", "type" : "branch", "children" : [
            { "text" : "leaf 2.1", "type" : "leaf" },
            { "text" : "leaf 2.2", "type" : "leaf" },
            { "text" : "leaf 2.3", "type" : "leaf" }
           ]
        }
    ]
},
        "types" : {
            "#" : {
                "valid_children" : ["branch"]
            },
            "branch" : {
                "valid_children" : ["leaf"]
            },
            "leaf" : {
                "valid_children" : []
            }
        },
"plugins" : ["types", "dnd", "contextmenu"]});

Answer 1

Also, you can override "contextmenu"

    "contextmenu":{
                "items": function () {
                    return {
                        "Create": {
                            "label": "Create",
                            "action": function (data) {
                                var ref = $.jstree.reference(data.reference);
                                sel = ref.get_selected();
                                if(!sel.length) { return false; }
                                sel = sel[0];
                                type = ref.get_type(sel);
                                if (type == "#")
                                    type = "branch";
                                else if (type == "branch")
                                    type = "leaf";
                                else if (type == "leaf")
                                    type = "";
                                sel = ref.create_node(sel, {text: "new "+type, type: type});
                                if(sel) {
                                    ref.edit(sel);
                                }

                            }
                        },
                        "Rename": {
                            "label": "Rename",
                            "action": function (data) {
                                var inst = $.jstree.reference(data.reference);
                                obj = inst.get_node(data.reference);
                                inst.edit(obj);
                            }
                        },
                        "Delete": {
                            "label": "Delete",
                            "action": function (data) {
                                var ref = $.jstree.reference(data.reference),
                                sel = ref.get_selected();
                                if(!sel.length) { return false; }
                                ref.delete_node(sel);

                            }
                        }
                    };
                }
            }, 

Answer 2

You have a problem with "types". The "Create" action in the "contextmenu" does not know about the types of "branch" and "leaf" and create new node with "type" : "default". You can see this:

        "types" : {
            "#" : {
                "valid_children" : ["branch", "default"]
            },
            "branch" : {
                "valid_children" : ["leaf", "default"]
            },
            "leaf" : {
                "valid_children" : []
            }
        },