Code posted below loads root elements for my tree by ajax request. My tree is very large so I can't load all items at once so I need to load elements by requesting children for specific ID's.

How do I load elements by ajax by clicking on node?

  $('#jstree_demo_div').jstree({
            "plugins" : ["wholerow", "checkbox"],
            'core' : {
                'data' : {
                    'url' : function(node) {
                        return "/" + site + "/places/api/tree/list/";
                    }
                },
            }

        });

Part of json sample

[
   {
      "text":"zachodniopomorskie",
      "state":"closed",
      "id":212353,
   },

Fixed version:

 $('#jstree_demo_div').jstree({
            "plugins" : ["wholerow", "checkbox"],
            'core' : {
                'data' : {
                    'url' : "/" + site + "/places/api/tree/list/",
                    'data' : function(node) {
                        return {
                            'id' : node.id
                        };
                    }
                },
            }
        })

The solution to my problem is that if I want to return children by ajax request I need to return json file which contains:

"children:" true

Code posted below loads root elements for my tree by ajax request. My tree is very large so I can't load all items at once so I need to load elements by requesting children for specific ID's.

How do I load elements by ajax by clicking on node?

  $('#jstree_demo_div').jstree({
            "plugins" : ["wholerow", "checkbox"],
            'core' : {
                'data' : {
                    'url' : function(node) {
                        return "/" + site + "/places/api/tree/list/";
                    }
                },
            }

        });

Part of json sample

[
   {
      "text":"zachodniopomorskie",
      "state":"closed",
      "id":212353,
   },

Fixed version:

 $('#jstree_demo_div').jstree({
            "plugins" : ["wholerow", "checkbox"],
            'core' : {
                'data' : {
                    'url' : "/" + site + "/places/api/tree/list/",
                    'data' : function(node) {
                        return {
                            'id' : node.id
                        };
                    }
                },
            }
        })

The solution to my problem is that if I want to return children by ajax request I need to return json file which contains:

"children:" true

• javascript
• jquery
• ajax
• jstree

• 6 +1 for "children":true. jstree is awesome but docu sucks. – timbernasley Commented Jun 17, 2014 at 8:42

3 Answers 3

 $('#jstree_demo_div').jstree({
            "plugins" : ["wholerow", "checkbox"],
            'core' : {
                'data' : {
                    'url' : "/" + site + "/places/api/tree/list/",
                    'data' : function(node) {
                        return {
                            'id' : node.id
                        };
                    }
                },
            }
        })

The solution to my problem is that if I want to return children by ajax request I need to return json file which contains:

"children:" true

Try this :

$('#jstree_demo_div').jstree(options).bind("select_node.jstree",function(event, data){
//Load child node here 

});//or "dbclick.jstree" instead of "select_node.jstree"

If you need to load child node you may try using

$("#jstree_demo_div").bind("select_node.jstree", function(e, data) {
    $("#jstree_demo_div").jstree('open_node', data.node);
}

so it would fire an ajax load trigger.