How can I refresh the contents of a jsTree?

Question

I have loaded a jsTree with an AJAX call that returns JSON data. How can I refresh the tree so that it reloads its contents?

score 78 · Accepted Answer · answered Sep 10 '10 at 03:59

78

Turns out is is as simple as calling:

   tree.jstree("refresh");

answered Sep 10 '10 at 03:59

John Mills

10,020
12
74
121

score 73 · Answer 2 · answered Nov 19 '14 at 14:05

73

At version 3 you can reload the tree :

$('#treeId').jstree(true).settings.core.data = newData;
$('#treeId').jstree(true).refresh();

answered Nov 19 '14 at 14:05

aecavac

1,026
8
7

3

This works for me, as I JSON data coming from some other function and not AJAX – TechMaze Apr 23 '15 at 20:33
I had to set the second parameter of refresh to true: tree.jstree(true).refresh(false, true); – jeffslofish Dec 05 '16 at 23:48
when using AJAX i had to chain `.url` -> `jstree(true).settings.core.data.url = "/new/data/url"` – okliv Mar 11 '17 at 13:24

score 26 · Answer 3 · edited Apr 02 '11 at 19:47

26

var tree = jQuery.jstree._reference("#files");
tree.refresh();

or

var tree = jQuery.jstree._reference("#files");
var currentNode = tree._get_node(null, false);
var parentNode = tree._get_parent(currentNode);
tree.refresh(parentNode);

edited Apr 02 '11 at 19:47

answered Apr 02 '11 at 15:38

Aigiz

381
3
3

3

I needed to refresh just one specific node. Thanks for this useful tip. – DavidHyogo Oct 12 '12 at 03:00
2

Yes, I don't like it, even v3 aPI, just like Internet Explorer. – Code Monkey Feb 12 '14 at 19:29

score 12 · Answer 4 · answered May 28 '14 at 03:47

12

for jstree3 . I use destroy() function and again create tree running jstree() function

answered May 28 '14 at 03:47

bydan

121
1
2

7

Actually, it's an event, but it helped. `tree.jstree("destroy")` – Ionică Bizău Jun 19 '14 at 05:35
@IonicăBizău It's both an event and a method... but that was the clue I needed. You can't call the destroy() method until the tree is initialized, but you can trigger the event. – Auspex Oct 12 '20 at 14:54

score 2 · Answer 5 · answered Dec 14 '16 at 13:05

2

$('#treeId').data('jstree', false).empty().jstree(json);

answered Dec 14 '16 at 13:05

Kedron

343
1
3
9

It does not work for jstree:3.3.9. You get an error `Uncaught TypeError: $jstree.data(...).empty().jstree is not a function` – Vity Feb 15 '21 at 07:30

How can I refresh the contents of a jsTree?

5 Answers5

Linked