Search code examples
jstree

how to refresh jstree with html instead rebuilding it

my code builds an html and initiates the jstree with that html :

var html = buildHtmlunorderedList()
$("#tree").html(html);
$("#tree").jstree({
    "core":{"multiple":false},
    "state":{"key":"vmsTree22"},
            "plugins":["state","sort"]
}).bind("select_node.jstree",handleLeftClick);`

This work perfect. now , every few minutes the html is built again and i want to refresh the jstree with it without the need to destroy it and initiate again (which cause a flick every time the tree is built again) :

inside a loop {

 html = buildHtmlunorderedList();
  var tree = $('#tree').jstree({
            "core":{"data":html}
});
tree.refresh(true);
}

but i am getting an error : Uncaught TypeError: Cannot read property 'className' of undefined (in jstree.js : var c = this.get_container_ul()[0].className;) which seams it doesn't find the first children of class jstree-children.

what i am doing wrong ? I didn't find any straight forward example of how to refresh the entire html of the tree without destroying it and build it again.

thanks for any help

Solution

  • You can replace data as below. Check demo - Fiddle.

    $("#tree").jstree().settings.core.data = newData;
$("#tree").jstree().refresh(true);