How to re-render tree on same div with different data

[AndeYashwanth]

I am creating a folder structure using jstree. The server initially send the "data" array using which I create the jstree.

$("#evts").jstree({ core: { data:data }});

There are some events generated in my application and I have to rerender the jstree with the new "data" received from the server. But there is no change in the tree, I created a jsfiddle to simulate what I am trying to achieve. https://jsfiddle.net/3t94evdc/

// get data from server and run this initially
$("#tree").jstree({ core: { data:data }});

// get newdata from server and rerender when some event in my app occur
$("#tree").jstree({ core: { data:newdata }});

why this doesn't work? Is there any workaround to rerender on the same div?

[vakata]

You could set core.data to a function which returns a variable which you control, and then simply call refresh.

var data = [...];
$("#tree").jstree({ core: { data:function (node, cb) { cb(data); } }});
// some time later
data = [...];
$("#tree").jstree(true).refresh();

Or destroy the instance and create it again: https://www.jstree.com/api/#/?q=destroy&f=destroy()

$("#tree").jstree(true).destroy();

[hoogw]

In 2022, v3.3.x this is the answer, old api does not work anymore

  $('#jstree_icon').jstree(true).destroy();