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?

Answer 1

"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.

Answer 2

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.