jsTree "create_node" really not working

Question

I am trying to dynamically add a new node in my jsTree container. It is not working at all. I don't know what i am 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>

check if this is of any use - http://stackoverflow.com/questions/9821006/creating-a-new-node-in-jstree — Ashwin, Jul 04 '12 at 11:58

score 39 · Answer 1 · answered Apr 02 '14 at 21:39

39

set 'check_callback' : true, otherwise all operations like create, rename are prevented. like 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"]
                });

answered Apr 02 '14 at 21:39

Pramod Alagambhat

1,551
14
10

1

+100 (if I could) this one caught me out as well....it should really specify this in the `create_node` API documentation as a note. – James Jul 29 '14 at 15:50
Thanks a lot! you saved me hours worth of work! I agree with James the the documentation is rather poor.... but its free, so... – mikewasmike Feb 20 '15 at 08:27
2

Honestly... jstree, wtf?! – Encoder Dec 07 '16 at 05:19
Man, you really saved my hours, Thanks a lot! – Ganesh May 26 '20 at 15:19

score 2 · Answer 2 · answered Nov 04 '14 at 16:51

Apart from setting core.check_callback to true, it's worth to mention that creating a simple doesn't require so many arguments. You could simply achieve it 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 could help someone. I had the problem and tried to follow the API but couldn't work;instead i inspected the codes from demos and found that.

score 1 · Answer 3 · edited May 23 '17 at 12:18

Demo simple what you need http://jsfiddle.net/gwxTa/2/ or http://jsfiddle.net/gwxTa/ or Dynamic - (click add button) http://jsfiddle.net/VBSJ8/ or http://jsfiddle.net/ak4Ed/

Please see my old post: jsTree not working

code from dynamic add button functionality:

$(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 are including 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>

I guess the examples are using the older version of jstree – Yash P Shah Apr 06 '18 at 22:08 — Yash P Shah, Apr 06 '18 at 22:08

score 1 · Answer 4 · answered Jul 04 '12 at 12:17

1

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

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

answered Jul 04 '12 at 12:17

Catalin

11,503
19
74
147

2

Greetings from the fuuuuuutuuuure! Try waiting for the 'ready.jstree' event: http://www.jstree.com/api/ – Pancakeo Mar 10 '14 at 17:24
Ahhhh! i wish i knew this on that time :) – Catalin Apr 03 '14 at 06:10
@Pancakeo, can you provide an example of waiting for 'ready.jstree'? not exactly sure how to implement this wait... – barrypicker Jan 30 '18 at 22:59
@Pancakeo 5 years later...the future is here – Catalin Oct 28 '19 at 09:08

score 1 · Answer 5 · answered May 22 '17 at 15:31

I ran into the same problem. The new node WAS storing in my database, but NOT updating the node name or node text. I ran Firebug.php and saw that the newly created node id (mysqli_insert_id) was not being passed to rename_node.

I solved it using session variables - setting a variable to indicate the rename function was accessed from create_node and also setting a 'last_id' session variable.

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

So, using the response.php example provided, I modified it as follows:

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;

score 0 · Answer 6 · answered Feb 12 '15 at 09:59

add a new node

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

where # is a parent node id (empty_now)

add a nested node for node1

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

the #1944 - parent node id

jsTree "create_node" really not working

6 Answers6