javascript - JSTree Select Open Node

Question

I have a problem with the JSTree.

I'm filling the selected item with data from DB. But I want the item I selected to open automatically after it is filled. I could not do the automatic opening part.

I added one button to the page (btn_test). I wrote the following in the click event of this button.

$("#TreeElement").jstree("toggle_node","#34B526D0-1E2C-4170-829E-1995782DB831");

When I click on the btn_test button, the node whose ID is written opens and closes. But I could not set this to open automatically when selecting and filling the corresponding node.

$("#btn_test").click(function () {
        $("#TreeElement").jstree("toggle_node","#34B526D0-1E2C-4170-829E-1995782DB831");
    });

JS side is as follows;

var TreeElement = $("#TreeElement");

TreeElement.jstree({
        "core" : {
          "check_callback" : true
        },
        state : { "opened" : true }
     });

TreeElement.bind("select_node.jstree", function (e, data) {

        GetSelectedElementChildrenNodes(data.node.id);

    });
 

function GetSelectedElementChildrenNodes(SelectedNodeId) {

    $.getJSON('http://serveripadress/api/browser.php?getchildren='+SelectedNodeId,function (data) {
        
        $.each(data,function (index,element) {
            TreeElement.jstree().create_node(SelectedNodeId
                , { "id" : element.nodeid, "text" : element.nodename}, "last");
            TreeElement.jstree(true).set_icon(element.nodeid,element.icon);

        });

    });
}

I get a different result when I change the code as follows. I click on Node1, it is filled with relevant data, but it does not open, then I click on Node2, but node1 is opening :)

TreeElement.bind("select_node.jstree", function (e, data) {

        GetSelectedElementChildrenNodes(data.node.id);
        $("#"+data.node.id).jstree("open_all");
    });

I've been changing the code for a while, but I just couldn't get it to work. If someone can help me with this, I really thank him.

Thank you so much!

question from:https://stackoverflow.com/questions/65908011/jstree-select-open-node

Answer 1

Problem solved.

In the function where I pulled the data with Json, I added the following code to the end of getJson.

TreeElement.jstree("toggle_node",NodeId);

The new state of the function is as follows;

function GetSelectedElementChildrenNodes(SelectedNodeId) {

    $.getJSON('http://serveripadress/api/browser.php?getchildren='+SelectedNodeId,function (data) {
        
        $.each(data,function (index,element) {
            TreeElement.jstree().create_node(SelectedNodeId
                , { "id" : element.nodeid, "text" : element.nodename}, "last");
            TreeElement.jstree(true).set_icon(element.nodeid,element.icon);

        });

        
        TreeElement.jstree("toggle_node",NodeId);


    });
}