JsTree "create_node" really doesn't work

Question

I am trying to dynamically add a new node to a jsTree container. It doesn't work at all. I don’t know what is missing.

jsfiddle example

$("#tree").jstree({ core: { "animation": 0 }, "html_data": {}, "themes": { "icons": false }, "search": { "case_insensitive": true, "show_only_matches": true }, "plugins": ["themes", "html_data", "search"] }); $("#tree").jstree("create_node", $("node_1"), "after", { "data": "Hello World" }); 

HTML:

 <div id="tree"> <ul> <li id="node1"><a>Hello</a></li> </ul> </div> 

Answer 1

set 'check_callback': true, otherwise all operations, such as create, rename, will be prevented. So:

  this.treeDiv.jstree( { 'core' : { 'check_callback': true, 'data' : { 'url' : function (node) { return 'ajax_roots.json'; }, 'data' : function (node) {} } }, "search" : { "fuzzy" : false, "show_only_matches": true, "close_opened_onclear" : true }, "plugins" : ["search", "sort", "json_data"] }); 

Answer 2

The demo is just what you need http://jsfiddle.net/gwxTa/2/ or http://jsfiddle.net/gwxTa/ or Dynamic - (click the add button) http://jsfiddle.net/VBSJ8/ or http: //jsfiddle.net/ak4Ed/

Please see my old post: jsTree is not working

code from the functionality of the dynamic add button:

 $(function() { $("#tree").jstree({ "json_data": { "data": [ { "data": "Hello", "attr": { "id": "root.id" }, "children": [{ "data": "Hello World", "attr": { "id": "node_1" }, "children": []} ]}, ] }, "plugins": ["themes", "json_data", "crrm"] }); }); $("#tree").jstree("create", $("#node_1"), "inside", { "data": "child2" }, function() { alert("added"); }, true); 

Hope you have included the scripts:

 <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> <link rel="stylesheet" type="text/css" href="/css/normalize.css"> <link rel="stylesheet" type="text/css" href="/css/result-light.css"> <script type='text/javascript' src="http://static.jstree.com/v.1.0pre/jquery.jstree.js"></script> <script type='text/javascript' src="http://static.jstree.com/v.1.0pre/jquery.hotkeys.js"></script> 

Answer 3

I don't know what causes this, but adding setTimeout when creating the node fixes the problem

 setTimeout(function() { $("#tree").jstree("create_node", $("node_1"), "after", { "data": "Hello World" }); }, 1000); 

Answer 4

Besides setting core.check_callback to true, it’s worth mentioning that to create a simple one you don’t need so many arguments. You could just achieve this by doing:

 $('#tree').jstree(true).select_node('nodeid'); var tr = $('#tree').jstree(true), selected = tr.get_selected(); selected = tr.create_node(selected, {"type":"file(or any other type you need)"}); 

Hope this helps someone. I had a problem and tried to follow the API, but could not work, instead I looked at the codes from the demos and found this.

Answer 5

I ran into the same problem. The new node stores WAS in my database, but DOES NOT update the name of the node or node. I started Firebug.php and saw that the newly created node id (mysqli_insert_id) was not passed to rename_node.

I decided to use session variables — set a variable to indicate that the rename function was available from create_node, as well as set the last_id session variable.

"CRN" is just a variable specific to my database and application, you can ignore it.

So, using the provided response.php example, I modified it like this:

 case 'create_node': FB::info($_GET, "New Node attributes "); $node = isset($_GET['id']) && $_GET['id'] !== '#' ? (int)$_GET['id'] : 0; $nodeText = isset($_GET['text']) && $_GET['text'] !== '' ? $_GET['text'] : ''; $CRN=$_SESSION['CRN']; $sql ="INSERT INTO CourseLookup (name, text, parent_id, CRN) VALUES('$nodeText','$nodeText','$node','$CRN')"; FB::info($sql, "new node query "); mysqli_query($conn, $sql); $last_id = mysqli_insert_id($conn); $_SESSION['create']=true;//passed to rename_node so it knows to use the $last_id for the node $_SESSION['lastid']=$last_id;//used as the node in rename_node $result = array('id' => $last_id); print_r($result);die; break; case 'rename_node': if($_SESSION['create']){//if a new node was just created $node=$_SESSION['lastid'];//use the last insert id } else{ $node = isset($_GET['id']) && $_GET['id'] !== '#' ? (int)$_GET['id'] : 0;//otherwise use the last menu item clicked } FB::info($_SESSION['create'],"create status");//debugging FB::info($_SESSION['lastid'],"last id");//debuggig //print_R($_GET); $nodeText = isset($_GET['text']) && $_GET['text'] !== '' ? $_GET['text'] : ''; FB::info($nodeText, "node name "); $sql ="UPDATE CourseLookup SET name='$nodeText', text='$nodeText' WHERE id=$node"; FB::info($sql, "rename node query "); mysqli_query($conn, $sql); $_SESSION['create']=false; break; 

Answer 6

add new node

 $("#categories_jstree").jstree('create_node', '#', {'id' : '1944', 'text' : 'nosde1'}, 'last'); 

where # is the parent node id (empty_now)

add nested node for node1

 $("#categories_jstree").jstree('create_node', '#1944', {'id' : '1945', 'text' : 'subnode1_1'}); 

# 1944 - parent node id