JSTree - Load nodes dynamically

Question

I'm using jstree v.3. I have a working example, where all the data is downloaded once from the server side via ajax.

$('#tree').jstree({
            'core': {
                'data': {
                    'url': "/ajax/getAll",                           
                    'data': function(node) {
                        return {'id': node.id};
                    },
                    // "check_callback" : true                    
                }
            },
            "types": {
                "category": {
                    "icon": "/img/category.png"
                },
                "page": {
                    "icon": "/img/page.png"
                }
            },
            "plugins" : ["types"]

        });

But I have A LOT of data to present. I want to load data for items, that were clicked. I don't have problems with server side, but I can't find examples for jstree part. Can anybody share the code or give advise?

Alexander Suraphel · Answer 1 · 2016-09-02T07:04:59.677

You just didn't find the right keyword. It's called lazy loading.

You'll have to write something like:

 $("#treeCell").jstree({
      "json_data" : {
        "ajax" : {
            "url" : function( node ){
                      // lets figure out the url - this function needs to
                      // return the formed URL. If "node" is "-1" then
                      // this is the top of the hierarchy and there's no parent
                      // key. Otherwise, node is a jquery object of
                      // the respective node from which we can fish out the
                      // metadata needed. (added below at "metadata" : op )
                      if( node == -1 ){
                        return "/list?parentkey="
                      } else {
                        return "/list?parentkey=" + node.data( "key" );
                      }
                    },
            "type" : "get",  // this is a GET not a POST
            "success" : function(ops) {
                  // this is called when the AJAX request is successful. "ops"
                  // contains the returned data from the server, which in
                  // my case is a json object containing an array of objects.
                  data = []
                  // go through data and create an array of objects to be given
                  // to jsTree just like when you're creating a static jsTree.
                  for( opnum in ops ){
                    var op = ops[opnum]
                    node = {
                        "data" : op.info,
                        "metadata" :  op ,
                        // THIS LINE BELOW IS THE MAGIC KEY!!! This will force
                        //  jsTree to consider the node
                        // openable and thus issue a new AJAX call hen the
                        // user clicks on the little "+" symbol or
                        // whatever opens nodes in your theme
                        "state" : "closed"
                    }
                    data.push( node );
                  }
                  return data; // this will return the formed array
                               // "data" to jsTree which will turn
                               // it into a list of nodes and
                               // insert it into the tree.
            }
         },
      },
      "core" : {"html_titles" : true,  "load_open" : true },
      "plugins" : [ "themes", "json_data", "ui", "cookies", "crrm", "sort" ]
  });

@Margo not my website. Will probably be up after some time. What is it that you don't understand? — Alexander Suraphel, Apr 10 '15 at 13:51
when i try the code-as-it-is (with my own URL ofcourse) i get absolutely nothing. no error, no log... nothing. i am using ver 3.3.2 of jstree. i am not seeing the initial ajax query also. — rajeev, Aug 29 '16 at 00:41
pl see my question here: http://stackoverflow.com/questions/39188372/jstree-unable-to-load-root-nodes-from-ajax-call — rajeev, Aug 29 '16 at 00:48

score 0 · Answer 2 · answered Oct 07 '16 at 19:57

Below is what you need for server side data requests, passing to the url the id of the clicked node. The same method will be used when the tree is initialized.

$('#tree').jstree({
    core: {
        data: {
            url: function(node) {
                return "/ajax/get/" + node.id
            }                                            
        }
    }
});

What is left is a backend method that will return the direct children of that node. You can read more about this in the docs here: https://www.jstree.com/docs/json/

JSTree - Load nodes dynamically

2 Answers2

Linked