jsTree load children by ajax

Question

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

+1 for `"children":true`. jstree is awesome but docu sucks. – timbernasley Jun 17 '14 at 08:42 — timbernasley, Jun 17 '14 at 08:42

score 5 · Accepted Answer · answered Sep 29 '15 at 21:05

 $('#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

score 1 · Answer 2 · answered Jan 21 '14 at 09:50

1

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"

answered Jan 21 '14 at 09:50

Yang Kul

45
1
10

I still don't understand how the child node should be loaded. What function I should call there? – Efrin Jan 21 '14 at 10:11
2

I got it fixed. Check my solution – Efrin Jan 21 '14 at 11:48

score 0 · Answer 3 · answered Jan 21 '14 at 12:04

0

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.

answered Jan 21 '14 at 12:04

Drath Vedro

330
2
10

Check my answer in the 1st post – Efrin Jan 21 '14 at 12:26

jsTree load children by ajax

3 Answers3

Linked