Asynchronous request (Get) in jquery

Question

I try to get tree structure so I use tree control. But I want at first get root level items, then after click on one of them I want to get it's child.

So I use a Get request with the following code:

$(function() {
    $('#tt').tree({
        onBeforeExpand: function(node) {
            var count = getChildren(node);
            if (count == 0) {
                var hospitalId = node.id;

                $.getJSON('@Url.Action("LoadDepartments")', {
                    hospitalId: hospitalId
                }, function(result) {

                    if (result != null) {
                        $('#tt').tree('append', {
                            parent: node.target,
                            data: result

                        });
                    }
                });
            }
        }
    });
});​

In this function I get data of selected parent node and append them to tree structure. I expect to see this child element after click on parent node and expand it. But I see the child element only after close and than again expand it. But If I use debug and go step by stem I see result immediately.

Maybe I should use delay?

Answer 1

Maybe you should change onBeforeExpand to onExpand ? To make sure that data is indeed loaded and injected after expansion.

From the docs:

onExpand: Fires when node is expanded.

It would also help if you provide a link to the jQuery plugin you are using.