Programmatically adding child nodes to a jstree

Question

I'm trying to write some code that adds nodes to a jstree dynamically. I've followed the doc at http://www.jstree.com/documentation/crrm but can't get a simple example to work -- the node child2 is being added, but it is being added to the node 'root.id' rather than 'child1.id' as specified... Any tips would be much appreciated. Code follows

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

<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" },
                          function() { alert("added"); }, true);
    });
});
</script>
</head>

<body>

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

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

For me, the operation "create" didn't work... I specified "create_node" and it worked ! — Jhonny D. Cano -Leftware-, Apr 14 '11 at 14:53
For what it's worth, I couldn't get `create` to work either. While `create_node` did work, I think the parameters must be different. It sure would be nice if their documentation wasn't so useless. Do you know where I can even find documentation on the `create_node` method? — Brad, Jul 13 '11 at 00:54
http://www.jstree.com/documentation Go to the core documents hyperlink — Ashwin, Apr 20 '12 at 11:34

score 14 · Answer 1 · answered Aug 14 '10 at 05:58

14

When using periods in ID's you need to escape them like so:

$("#tree").jstree("create", $("#child1\\.id"), "inside",  { "data" : "child2" },
                          function() { alert("added"); }, true);

This is because of how it uses jQuery selectors. It is mentioned in the jsTree FAQ located here: http://www.jstree.com/faq/

answered Aug 14 '10 at 05:58

WSkid

2,736
2
22
26

3

Link to FAQ in answer is dead. – Pang Oct 13 '15 at 03:07

score 3 · Answer 2 · answered Mar 21 '14 at 20:17

first initialize jstree(in my case i use ajax), put check_callback into core obj and call the plugin after core obj like this:

jQuery('#jstree_demo_div').jstree({
    'core' : {
          'data' : {
            'url' : 'data/mapas.php',

          },
          "check_callback" : function(e,data){
              console.log(data)
          }
      },
      "plugins" : [ "contextmenu" ] })

second use this line and put $('#j1_1') as parent , the data in json, 'last' as position or 'first', the function callback (in my case is the function tales()), internal argument set in true

jQuery("#jstree_demo_div").jstree(true).create_node( $('#j1_1'), {text: "New node", id: true} , "last",tales(), true );

Programmatically adding child nodes to a jstree

2 Answers2

Linked