AJAX response to update Tree data

Webix JS
1

Hi,

I have the following snippet of code and would like to be able to fetch the data fetch server-side data based on the selection in the combo.
So far this works and gets the data from the server but I can’t figure out how to update this data to the tree menu.

<script type="text/javascript" charset="utf-8">
    var combo = webix.ui({
        container: 'combo_menu',
        view: "combo",
        label: "Unit",
        labelPosition: "top",
        labelAlign: 'left',
        placeholder: "Select Unit",
        id: "bu_select",
        options: "rest->/units.json",
        button: true
    });

    var tree = webix.ui({
        container: "tree_menu",
        view: "tree",
        id: "treeMenu",
        select: true,
        height: 500,
        data: []
    });

    webix.ready(function () {
        webix.ui({
            combo,
            tree
        });
    });
    
    $$("bu_select").attachEvent("onChange", function (sel, oldv) {
        webix.message("Value changed from: " + oldv + " to: " + sel);

        $.ajax({
            url: "tree_data",
            type: "GET",
            dataType: 'script',
            data: {bu_id: sel},
            success: function (data) {
                webix.message(data);
                $$("treeMenu").updateItem(data)
            }
        });
    });
</script>

This does not work.
$$("treeMenu").updateItem(data)

Any help is appreciated.

2

I figured it out. And using the built-in webix ajax made it more succinct.

    $$("bu_select").attachEvent("onChange", function (sel,) {
      webix.ajax().get("nodes_by_bu", "bu_id=" + sel, function(text,data){
        $$("treeMenu").clearAll();
        $$("treeMenu").parse(text);
      });
     });
3

Hello,

Sorry for the delay.
You can use onChange event. To clear data, you need to call clearAll() method. And, after this, you need to parse incoming data to the component with the help of parse method

combo.attachEvent("onChange",  function(value, old){
   webix.ajax().get( "url", { param:value }, function(text, data, xhr){
      tree.clearAll();
      tree.parse(data.json())
   })
})

Information about Ajax operations you can find here.

Also, webix.ajax support promise:

webix.ajax().get( "url", { param:value }).then(function(data){
      tree.clearAll();
      tree.parse(data.json())
})