Search code examples
javascriptjstreejstree-dnd

redraw the jstree with every new data


I want to redraw the jstree with every new data that came from the server, I tried these two in line * but it did not work, it keep showing the tree from first data

folderTreeView.jstree(true).refresh();

and

folderTreeView.jstree(true)redraw(true)
folderTreeView = $(".folderpreview");
        // Files Treeview
        if (folderTreeView.length) {
          document.getElementById("preview").innerHTML = '<embed type="text/pdf" src=""  width="0" height="0" >';
          folderTreeView
            .on("changed.jstree", function (e, data) {
              //blabla
            })
            .jstree({
              core: {
                data: datanew.children,
              },
              plugins: ["types"],
              types: {
                default: {
                  icon: "far fa-folder font-medium-1",
                },
                ".jpg": {
                  icon: "far fa-file-image text-info font-medium-1",
                },
                ".docx": {
                  icon: "far fa-file-word text-info font-medium-1",
                },
                ".doc": {
                  icon: "far fa-file-word text-info font-medium-1",
                },
                ".pdf": {
                  icon: "far fa-file-pdf text-info font-medium-1",
                },
              },
            })
*
        }

Solution

  • I solved it by using
    $(".folderpreview").jstree("destroy");
    before updating the tree data