Refreshing existing tree with new data?

[Slim Slam]

I have a Jstree tree that's loaded with data and is displayed.

If I want to redisplay the same tree with entirely new data from a new data source via AJAX,

do I have to destroy the tree and reattach all the event handlers, or is there

a way to do it (reasonably performant) using jstree.refresh or jstree.redraw?

Currently, we are refreshing the tree when someone clicks on a button (see code below)

which works but requires re-attaching all the event

handlers (and we have a lot of event handlers):

$('#somebutton').on('click', function(event) {
 
 // Clear the current tree
 // This call also removes all event handlers for the tree
 $('#jst_propl').jstree('destroy');
 
 //Rebuild the tree with new data
  $('#jst_propl').jstree({
   "core" : {
    "check_callback" : true,
      "data" :  {
           'url' : function (node) {
               return '/getstuff/@mapobj.id.toString/';
            },
           'data' : function (node) {
                 return { 'id' : node.id };
            }
       }
   }
  });
});

[Ivan Bozhanov]

Do not destroy the tree - simply call:
$('#jst_propl').jstree(true).refresh();

Also take a look at the refresh api docs - it can also forget the state if that is what you need.

Best regards,
Ivan


[Slim Slam]

Hi Ivan,

  When I replace the destroy call with:

$('#jst_propl').jstree(true).refresh();

 ...the old data is refreshed and the new data is not displayed. 

Is there a step missing somewhere?

 I've also tried moving the refresh call to

immediately after the AJAX call.

J

[Ivan Bozhanov]

What AJAX call? jstree is the one that makes the AJAX call, provided your address returns the new data it should be OK.
I guess I missed the part about "new data source" - so you need the address to be different? In that case prior to refresh try setting the new info:
$("#jstree").jstree(true).settings.core.data.url = "new_url";
$("#jstree").jstree(true).refresh();

Best regards,
Ivan

[Slim Slam]

Thanks Ivan, it works. Here's the revised version using refresh:

$('#somebutton').on('click', function(event) {





  $("#jst_propl").jstree(true).settings.core.data.url ='/getstuff/@mapobj.id.toString/';

  $('#jst_propl').jstree(true).refresh();

});

[Long Cao Thanh]

Hi Ivan,

I have a problem, i draw my tree from json data like this:

function initTree(treeData) {
    console.log(treeData);
    $('.easy-tree').jstree({
        "core": {
            "multiple": true,
            "animation": 0,
            "check_callback": true,
            'data': treeData
        }, ....

But when treeData changes, the tree does not change.

P/s: console.log(treeData) >>> treeData in this line changes

Tks !