Unable to Pass parameter to load JSTree (rerender)

Question

I have tried alot. On Page load working fine.

I want to reload JStree on DataTable row click. Taking Id from DataTable row and passing it to JStree. Whenever I put JSTree in a function. Its not rendering on page. I tried different ways. But no success. Only working on page load.

DataTable

$('#roles').on('click', 'tr', function () {
    var id = table.row(this).id();
    alert(id);
    id = table.row(this).id();

    $.ajax({
        async: true,
        type: "POST",
        url: '/Home/GetData',
        dataType: "json",
        data: { roleId: id },
        success: function (json) {
           createJSTree(json);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status);
            alert(thrownError);
        }
    });
});

JSTree

function createJSTree(jsondata) {
    $('#app_tree').jstree({
        'core': {
            'data': jsondata
        }
    });
}

On Page Load

$('#app_tree').jstree({
    'plugins': ["wholerow", "checkbox", "types"],
    'core': {
        "themes": {
            "responsive": false
        }
    }
});

This is Working fine on page load

$('#app_tree').jstree({
    'plugins': ["wholerow", "checkbox", "types"],
    'core': {
        'check_callback': true,
        "themes": {
            "responsive": false
        },
        'data': {
            'type': "POST",
            "url": function (node) {
                return "/Home/GetData?roleId=acb31181-b364-4a57-8806-70f5fcb07d1f";
            },
            'contentType': "application/json"
        }
    }
});

Answer 1

you may need to redraw JSTree for your new data.

Please check the similar stack here