Question

This is regarding the jsTree jQuery plugin. I’ve been struggling with this for a while now only to realise it’s
not (natively) possible to do, so I thought about the following solution to my problem below (which doesn’t work).

I have a tree that uses the json_data plugin with ajax. Once you open
a specific node the result from the server is an array of over 1000
json nodes. The response is pretty fast but the rendering itself takes
a while (the user experience is that he gets the annoying “script not
responding – stop script / continue” message.

The solution I thought about was limiting the results sent back from
the server to a smaller number (say 200) and using some “show more”
label (or using the jQuery scroll event) to fetch the next 200.
However, using the jstree.create on each of those nodes appears to be
very slow.
I then noticed this thread on the jsTree google group
in which Ivan suggest it’s possible to create all nodes at once using
the parse_json function – this doesn’t work for me.

A short code snippet of what I’m trying to do:
(when clicking the “show more” label):

$.ajax({
   // send data to server in order to get the relevant json back
   }(),
   success : function (r) {
           var parent_node = data.inst._get_parent(data.rslt.obj);
           var id = parent_node.attr("id");
           $("#root_tree").jstree("_parse_json", r, parent_node );
           $("#root_tree").jstree("clean_node", parent_node, false);
           }
   });

The above example doesn’t render the json and adds the children to the
parent node.

I would highly appreciate any other approach or if anyone could point
out what am I doing wrong.
Again, using:

$.each(r, function(i, node) {
       var id = parent_node.attr("id");
       $("#root_tree").jstree("create", "#"+id, "last", node, false, true);
});

Does work, but very very slowly (slower than rendering all 1000 nodes
together).

Thanks

Answer 1

Ok, so my usage was a bit off.

What I ended up doing, was calling the function on the tree view instead of listening to the event:

 var ref = parent_node.attr("id");
 $.each(data, function(i, jsonNode) {
       var node = inst._parse_json(jsonNode);
       node.insertInside(ref);
 });