Lazy loading with jsTree

Question

I am trying to dynamically load the nodes of a jtree when they are expanded. The little documentation I found is at the end of this page.

I found some solutions that create the nodes one by one with a loop like this one. I have not tried it, but looking at the documentation page I have the feeling that jstree should take care of cycling through the nodes.

I found many solutions that use plugins: ["json_data"], but the plugins documentation page doesn't mention that plugin at all. Is that an old plugin that is not required anymore?

My current implementation uses this code to load the whole tree in one shot:

$.ajax({
    var pn = $('#project_number').val();
    url : "bomtree?part=" + pn,
    success : function(tree_content) {
        var data = $.parseJSON(tree_content);
        var config = {
            'core' : {
                'data' : data
            }
        };
        $('#bom_tree').jstree(config);
    }
});

I modified the code on the documentation page like this:

$(function() {
    var pn = $('#project_number').val();
    $('#tree').jstree({
        'core' : {
            'data' : {
                'url' : function(node) {
                    return '/doc/test2';
                },
                'data' : function(node) {
                    return {
                        'part' : node.id === '#' ? pn : node.id
                    };
                }
            }
        }
    });
});

The same json text works with the first code, now with the second. The documentation says The format remains the same as the above, so I didn't change it.

I tried also returning the same data as in the example, this:

[
       { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
       { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
       { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
       { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
]

But the result is the same: jquery throws a Sizzle.error at the following line:

Sizzle.error = function( msg ) {
    throw new Error( "Syntax error, unrecognized expression: " + msg );
};

Where the content of msg is the json data returned by the server.

What's wrong?

Nathan · Answer 1 · 2016-04-20T03:29:53.790

16

"When using AJAX set children to boolean true and jsTree will render the node as closed and make an additional request for that node when the user opens it.", this is from jstree document and it could achieve your requirement.

edited Apr 20 '16 at 03:29

answered Oct 28 '14 at 16:33

Nathan

181
1
5

score 10 · Answer 2 · answered Jan 10 '15 at 16:54

Extending Nathans answer with a (very minimalistic) example: the Demo tree with lazy loading.

JS:

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

});

PHP:

header('Content-Type: application/json');

if ( $_GET["id"] === "#" ) { 
    $data = array(
            array( "id" => "ajson1", "parent" => "#", "text" => "Simple root node"  ),
            array( "id" => "ajson2", "parent" => "#", "text" => "Root node 2", "children" => true ),

    );
}

else if ( $_GET["id"] === "ajson2" ) {
    $data = array(
        array( "id" => "ajson3", "parent" => "ajson2", "text" => "Child 1" ),
        array( "id" => "ajson4", "parent" => "ajson2", "text" => "Child 2" )
    );
}

echo json_encode( $data);

only Nodes that have "children" : true, will generate a request for children when opened, other nodes are treated as leaves.

This helped me a lot to understand the JsTree structure and how it worked with the parent and lazy load. You just saved me my man :) — Md Mazedul Islam Khan, Mar 14 '16 at 20:08
Thank you for this. It was finally the example I needed to make on-demand loading work. — toni rmc, Jul 10 '16 at 21:21

score 8 · Answer 3 · edited Feb 03 '16 at 18:22

I'll give you that the documentation/examples is pretty rough. I'll also add that the source of your confusion comes from a major upgrade - the old version doesn't have much in common with the new version and unfortunately most examples were written against that old version.

The good news is that lazy loading is supported out of the box, it just isn't that obvious. The key is that it does call your data: config as each node is expanded. But in order for it to work, the URL function must return a different URL for the given node. In the code below, note the condition to return one URL if the node is root (#), and another if it is not.

$('#TreeDiv')
  .jstree({
    core: {
      data: {
        url: function (node) {
          return node.id === '#' ? '/UserAccount/AccountGroupPermissions' 
                                 : '/UserAccount/AccountPermissions/' + node.id;
        },
        type: 'POST'
      }
   },
   plugins : ["checkbox"]
});

As of jsTree 3.3.5, you ~can~ use the same URL and still have lazy loading. Answer by André Bonna below reveals that setting `node.children = true` in the `'success'` property will cause the jsTree to utilize lazy loading and call the same URL each time a node is expanded. If only one URL is specified, it will be the URL used. — barrypicker, Jan 27 '18 at 19:32

score 5 · Answer 4 · answered Mar 21 '16 at 19:47

To make a lazy loading, you need a backend that returns a JSON object with tree nodes that has children property field. Children property must contain children elements or boolean true (array or boolean). With a strongly typed language on your backend it is going to be ugly, so its best to deal with it on frontend. Example of AJAX success callback:

$('#tree').jstree({
    'core' : {
        'data' : {
            'url' : function(node) {
                return '/doc/test2';
            },
            'data' : function(node) {
                return {
                    'part' : node.id === '#' ? pn : node.id
                };
            },
            'success' : function(nodes) {

                var validateChildrenArray = function(node) {

                    if (!node.children || node.children.length === 0) {
                        node.children = true;
                    }
                    else {
                        for (var i = 0; i < node.children.length; i++) {
                            validateChildrenArray(node.children[i]);
                        }
                    }
                };

                for (var i = 0; i < nodes.length; i++) {
                    validateChildrenArray(nodes[i]);
                }
            }
        }
    }
});

By doing this, you are going to be able to lazy load your tree.

Thank you so much for this, saved my day! – phifi Jan 29 '18 at 12:25 — phifi, Jan 29 '18 at 12:25

score 0 · Answer 5 · answered Feb 04 '17 at 20:27

I made my customized lazy loading by combining "select_node.jstree" event and "create_node" method. On selecting every node, event handler checks if there are children and adds response of server to selected node, node by node. My server response was not similar or requirements of jstree and this strategy saved me a lot of time and effort. Hope it helps somebody.

Lazy loading with jsTree

5 Answers5

Linked