jsTree - loading subnodes via ajax on demand

Question

I\'m trying to get a jsTree working with on demand loading of subnodes. My code is this:

jQuery(\'#introspection_tree\').jstree({ 
        \"json_data\" : {
              


        

Answer 1

I guess it would be nice to display by default first level nodes and then the children will be loaded on demand. In that case the only thing you have to modify is to add "state" : "closed" to the nodes whose child nodes are going to be loaded on demand.

You might wish to send node's id in ajax call so you modify your code

"json_data": {
    //root elements to be displayed by default on the first load
    "data": [
        {
            "data": 'Kit 1',
            "attr": {
                "id": 'kit1'
            },
            "state": "closed"
        },
        {
            "data": 'Another node of level 1',
            "attr": {
                "id": 'kit1'
            },
            "state": "closed"
        }
    ],
    "ajax": {
        url: "http://localhost/introspection/introspection/product",
        data: function (n) {
            return {
                "nodeid": $.trim(n.attr('id'))
            }
        }
    }
}

From jsTree documentation

NOTE: If both data and ajax are set the initial tree is rendered from the data string. When opening a closed node (that has no loaded children) an AJAX request is made.