views:

125

answers:

0

I have some code in which I need the ability to add child nodes to a jstree which themselves contain children. The below code adds a 'child2' node correctly to 'child1' but ignores the child3 data. Any help much appreciated. Code follows:

<html>
<head>
<script type="text/javascript" src="http://static.jstree.com/v.1.0rc2/jquery.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://static.jstree.com/v.1.0rc2/jquery.jstree.js"&gt;&lt;/script&gt;

<script type="text/javascript">
$(document).ready(function() {
    $(function () {
        $("#tree").jstree({ 
            "json_data" : {
                "data" : [
                    { 
                        "data" : "parent", 
                        "attr" : { "id" : "root.id" }, 
                        "children" : [ { "data" : "child1",
                                         "attr" : { "id" : "child1.id" },
                                         "children" : [ ] }
                                     ]
                    },
                ]
            },
            "plugins" : [ "themes", "json_data", "crrm" ]
        });
    });
    $("#add").click(function() {
        $("#tree").jstree("create", $("#child1\\.id"), "inside",
                { "data" : "child2", "attr" : { "id" : "child2.id" },
                  "children" : [ { "data" : "child3", "attr" : { "id" : "child3.id" }, "children": [ ] } ] },
                          function() { alert("added"); }, true);
    });
});
</script>
</head>

<body>

<div id="tree" name="tree"></div>

<input type="button" id="add" value="add" />
</body>
</html>