Recreate entire jstree instance with new json data

Here's how I solved this problem:- wrap all the bindings and initialization of the tree in a function- call this function from my document.ready function (this handles initial setup of the tree)- in the success callback of my ajax call, I destroy the tree and then call the function again

Here's the code:

function loadTargetTree() {    $("#target-book-tree").bind("select_node.jstree", function (e, data) {      data.rslt.obj; // the LI node that was clicked      selectedTargetID = data.rslt.obj.attr("id");      if(data.rslt.obj.hasClass("book") || data.rslt.obj.hasClass("section")) {        targetChapterIsSelected = false;        toggleCopyTools()      } else {        targetChapterIsSelected = true;        toggleCopyTools();        target_parent_id = selectedTargetID;      }    });    $("#target-book-tree")        .jstree({            core : {                "initially_open" : ["book_"+getParameterByName('target_book_id')],                "animation": 100                },            "plugins":["themes","html_data","ui"],            "themes" : {                "theme" : "classic",                "dots" : true,                "icons" : false                },            "ui" : {                "select_limit" : 1,                "selected_parent_close" : "deselect",                },        });}$(document).ready(function() {    loadTargetTree();});AND MY AJAX CALL:    var sendData = 'new_name='+$('input#new_name').val()+'&target_book_id='+target_book_id + '&source_lib_id='+source_lib_id + '&target_parent_id='+target_parent_id;    $.ajax({          dataType: "json",       type: "POST",       url: "/ajax/CopySelectedSection",       data: sendData,        error: function(data) {            alert("Oops! An error occured. Please try again later.")        },        success: function(data) {                if (data['status'] == "ok") {                    $("div#target-book-tree").html(data['book_outline']);                    $("#target-book-tree").jstree('destroy');                    loadTargetTree();                } else {                    alert("Sorry, ...");                }        }     })

I had the same problem. Version jsTree - 3.0.*. A have solved it in the next way:

$(function (){            var data = JSON.parse('<?php echo $treedata;?>');            initTree(data);            var data1 = JSON.parse('<?php echo $terminsData;?>');            var flag = 0;            $("#butree").on("click", function () {                if (flag) {                    $("#termtree").jstree("destroy");                    initTree(data);                    flag = 0;                } else {                    $("#termtree").jstree("destroy");                    initTree(data1);                    flag = 1;                }            });        });