how to append json variable as child nodes using "jstree" jquery plugin - no ajax

Question

I have a jsTree using the json data format. Loading the root nodeset is fine.

My problem is how to append child nodes to the parent node that was clicked.

ANY help would be appreciated.

Thanks!

    $("#tree-cat1")
    .bind("open_node.jstree", function (event, data) {
        console.log(data.rslt.obj.attr("id"));
        //eval(loadChild());
        //at this point i need to append the result of loadChild() to the tree under the relevant node
    })
    .jstree({
        "json_data": {
            "data": eval(loadRoot())
        },
        "themes": {"theme": "classic","dots": true,"icons": true},
        "plugins": ["themes", "json_data", "ui"]
    })

function loadRoot() {
    return "[{'data':'A node','state':'closed','attr':{'id':'A'}}]";
}
function loadChild() {
    return "[{'data':'A1 node','attr':{'id':'A1'}}]";
}

do you want to add children each time the node will be opened? why you don't use 'children' property to append items on tree initialization — Irishka
– Irishka, Commented Oct 27, 2011 at 14:13
each time node expands i run oracle query to get data (all within javascript). Data returned into a js variable. i then have to populate tree with returned data at the relevant point in tree (as per the code sample) — lance
– lance, Commented Oct 28, 2011 at 8:27

Irishka · Accepted Answer · 2011-10-28 14:26:40Z

see documentation here: jsTree docu

EDIT

here is the code, you need to change url to your destination, try it

html:

<div id="tree-cat1"></div>

js:

 $("#tree-cat1").jstree({
    "plugins": ["themes", "json_data", "ui"],
    "themes": {"theme": "classic","dots": true,"icons": true},
    "json_data": {
          //root elements
        "data": [{"data":'A node',"state":'closed',"attr":{"id":'A'}}], 
        "ajax": {
            "type": 'POST',
            "data": {"action": 'getChildren'},
            "url": function (node) { 
                var nodeId = node.attr('id'); //id="A"

                return 'yuorPathTo/GetChildrenScript/' + nodeId;
            },
            "success": function (new_data) {
                //where new_data = node children 
                //e.g.: [{'data':'A1 node','attr':{'id':'A1'}}, {'data':'A2 node','attr':{'id':'A2'}}]
                return new_data;
            }
        }
    }
});

OLD PART
something like that will populate opened node with children, if not already done:

 ...
    "json_data": {
          //root elements
        "data": [{"data":'A node',"state":'closed',"attr":{"id":'group_A'}}], 
        "ajax": {
            "type": 'POST',
            "data": {"action": act.GET_GROUPREPORTS},
            "url": function (node) { 
                var nid = node.attr('id'); //id="group_A"
                nid = nid.substr(nid.lastIndexOf('_')+1);

                return module.getDBdata_path + nid;
            },
            "success": function (data) {
                var rid, new_data = data;

                if (typeof data[0] === 'undefined') {
                    new_data = [];
                    for (rid in data) {
                        if(data.hasOwnProperty(rid)) {
                          new_data.push({"data": data[rid], 
                               "attr": {"id": 'rprefix_'+rid, 
                                        "title": ' ', 
                                        "rel": 'report',
                                        "href": module.repView_path+rid
                              }
                          });
                        }
                    }
                }
                return new_data;
            }
        }
    }, ...

Thanks Irishka, but i still cannot get it working. I tried your suggestion using the ajax object but somewhere i'm missing something. If you have time could you use my example as a basis to your solution? If we get this working i would owe you big time!

Collectives™ on Stack Overflow

how to append json variable as child nodes using "jstree" jquery plugin - no ajax

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related