jsTree expand a node using AJAX call is not working

Question

I am using jstree and trying to expand a parent node while making an AJAX call.

I tried following the documentation but could not get it working..

                                        _panelContent.jstree({'core': {
                                            'url': function (node) {
                                                console.log('Node', node);
                                                var url = '/mystorage/directory?resourcename=' + node.text;

                                                return url;
                                            },
                                            'data': function () { // loop through the response and push them in data
                                                var results = [];
                                                for (var i = 0; i < _result.length; i++) {
                                                    results.push({ id: i, text: _result[i].name, state: 'closed' });
                                                }

                                                return results;
                                            }

                                        } });

What am I doing wrong ?

Only the loading icon comes.... but the call never resolves.. neither the call goes over the network.

But if I hardcode the complete url and do the load without making an AJAX call, jstree renders properly.

Answer 1

Your jstree ajax call is not configured correctly. There are many ways of doing this

1 way could be

jQuery("#introspection_tree").jstree({
    "plugins" : ["themes", "json_data", "ui"],
    "json_data" : {
        "ajax" : {
            "type": 'GET',
            "url": function (node) {
                var nodeId = "";
                var url = ""
                if (node == -1)
                {
                    url = "http://localhost/introspection/introspection/product/";
                }
                else
                {
                    nodeId = node.attr('id');
                    url = "http://localhost/introspection/introspection/children/" + nodeId;
                }

                return url;
            },
            "success": function (new_data) {
                return new_data;
            }
        }
    }
});

This is just the way to show how ajax call can be called.

More detail here on accepted answer