Jquery – jsTree not creating node of an specific type

jqueryjstree

I've followed the code fragment in the last example of http://www.jstree.com/demo/types to create a node of a given type and I've got no idea why it doesn't work.

HTML Fragment:

    <form>
        <button id="buttonAddMenu" type="button">Créer Menu</button>
        <button id="buttonAddParameter" type="button">Créer Paramètre</button>
        <button id="buttonRename" type="button">Renomer</button>
        <button id="buttonRemove" type="button">Supprimer</button>
        <button id="buttonShowData" type="button">Show Data</button>
    </form>
    <div id="checkListParams">
    <ul>
        <li id="new001"><a href="#">Root menu 1</a></li>
        <li id="new002"><a href="#">Root menu 2</a>
            <ul>
                <li><a href="#">Menu 2.1</a></li>
                <li><a href="#">Menu 2.2</a>
                    <ul>
                        <li rel="parameter"><a href="#">Parameter A</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    </div>

Javascript:

$(document).ready(function() {
//================
//Configuring tree
//================
$("#checkListParams").jstree({ 
    "ui" : {
        "select_limit": 1
    },
    "contextmenu" : {
        "select_node": true
    },
    "hotkeys" : {
        "del": false //disable deleting nodes only via DEL key
    },
    "types" : {
        "valid_children" : [ "default" ],
        "use_data" : true,
        "types" : {
            "default" : {
                "valid_children" : [ "all" ]
            },
            "parameter" : {
                "icon" : { 
                    "image" : "site/media/img/icons/checklist_parameter.png" 
                },
                "valid_children" : [ "none" ],
                "create_node": false
            }
        }
    },
    "core" : { "initially_open" : [ "all" ] },
    "plugins" : [ 
    "themes", "html_data", "xml_data", "ui", "crrm", "dnd", 
    "contextmenu", "hotkeys", "types"
    ]
});

//==========================
//Configuring button actions
//==========================
$("#buttonAddMenu").click(function() {
    $("#checkListParams").jstree("create");
});

$("#buttonAddParameter").click(function() {
    //$("#checkListParams").jstree("create", null, "inside"); //works!
    $("#checkListParams").jstree("create", null, "inside", { "attr" : { "rel" : "parameter" } });
});

$("#buttonRemove").click(function() {
    $("#checkListParams").jstree("remove");
})

$("#buttonRename").click(function() {
    $("#checkListParams").jstree("rename");
})

$("#buttonShowData").click(function() {
    var nodes = $("#checkListParams").jstree("get_xml", {
        "li_attr" : [ "id" , "class", "rel" ]
    });
    alert(nodes);
})

});

The line

$("#checkListParams").jstree("create", null, "inside", { "attr" : { "rel" : "parameter" } });

is not working. I've tried to change the type to "default", without success… Also, I've got no error messages (I don't like not getting error messages when things don't run).

Thank you in advance.

UPDATE

Solved using instructions in http://osdir.com/ml/jstree/2011-04/msg00126.html .
Explicitly listing all valid children (instead of using "all") solved the problem.

I'll check whether a similar bug is filed in jsTree issues pages tomorrow, maybe adding a new one.

Thanks anyway.

Best Answer

Just repeating the above UPDATE as asked by some people:

Solved using instructions in http://osdir.com/ml/jstree/2011-04/msg00126.html . Explicitly listing all valid children (instead of using "all") solved the problem.

I'll check whether a similar bug is filed in jsTree issues pages tomorrow, maybe adding a new one.

Thanks anyway.