62

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?

0

5 Answers 5

78

Turns out is is as simple as calling:

   tree.jstree("refresh");
0
73

At version 3 you can reload the tree :

$('#treeId').jstree(true).settings.core.data = newData;
$('#treeId').jstree(true).refresh();
3
  • 3
    This works for me, as I JSON data coming from some other function and not AJAX
    – TechMaze
    Apr 23, 2015 at 20:33
  • I had to set the second parameter of refresh to true: tree.jstree(true).refresh(false, true); Dec 5, 2016 at 23:48
  • when using AJAX i had to chain .url -> jstree(true).settings.core.data.url = "/new/data/url"
    – okliv
    Mar 11, 2017 at 13:24
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);
2
  • 3
    I needed to refresh just one specific node. Thanks for this useful tip.
    – DavidHyogo
    Oct 12, 2012 at 3:00
  • 2
    Yes, I don't like it, even v3 aPI, just like Internet Explorer. Feb 12, 2014 at 19:29
12

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

2
  • 7
    Actually, it's an event, but it helped. tree.jstree("destroy") Jun 19, 2014 at 5: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, 2020 at 14:54
2

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

1
  • 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, 2021 at 7:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.