JStree Async Search

Question

Whe are busy building a web based app. And we inherited the code where the previous developers used jstree so now the whole site consist out of a tree that uses jstree.

Everything worked even the search on the tree, but then we came across a problem where certain tabs loaded too long because of the tree which was too big.

So we went and made the the tree async / lazy loading which works perfectly but know the problem is that the search doesn't work that well.

Because we made a api for the search which works but it doesn't do the call back after new tree has been loaded.

Can someone help because I've been struggling for 3 days now and its giving me a head ache.

    // Tree Search
searchAjaxFunction: function () {

        var TreeCustomApiRequest = {
            nTreeCustomDesc: document.getElementById("tree_search").value,
            nUserId: document.getElementById("TrendUserID").value,
            nAccessLevel: document.getElementById("hfTrendAccessLevel").value
        }  
           $.ajax({
            type: "POST",
            data: JSON.stringify(TreeCustomApiRequest),
            url: 'api/TreeCustomSearch.aspx',
            success: function (jsonData)
            {
                Tree.dataJson = jsonData;

                // Clear the tree.
                //Tree.dataJson = jsonData;
                if ($("#tree").jstree()) {
                    $('#tree').jstree(true).settings.core.data = jsonData;
                    $('#tree').jstree(true).deselect_node(this);
                    $('#tree').jstree(true).toggle_node(this);
                    $('#tree').jstree(true).refresh();
                }
            },
            contentType: "application/json"
        }); 
},

onClickFunctionNode: function(node) {
    Tree.treeDivIdSelector.jstree(true).toggle_node(node);
},
pluginsArray: ["search", "checkbox", "types", "json_data","html_data"],
treeMenuContextItems: {},
Init: function(initData) {
    Tree.dataJson = initData.dataJson;
    Tree.treeDivIdSelector = initData.chartDivId;
    Tree.searchDivIdSelector = initData.searchDivId;
    var apiUriTree = 'api/TreeCustomChildren.aspx';
    Tree.treeDivIdSelector.jstree({
        "checkbox": {
            "keep_selected_style": true,
            "three_state": false
        },
        "plugins": Tree.pluginsArray,
        'core': {
            'data': function (node, cb) {
                // Fetch tree custom parent nodes
                if (node.id === "#") {
                    cb(Tree.dataJson);

                }
                else {
                    var _cb = cb;
                    //Fetch tree custom Child nodes


                    var TreeCustomApiRequest = {
                        nUserId: document.getElementById("TrendUserID").value,
                        nAccessLevel: document.getElementById("hfTrendAccessLevel").value,
                        nTreeCustomParentId: node.id
                    }
                    function recieveData(data) {
                        cb(data);
                    }

                    $.ajax({
                        type: "POST",
                        data: JSON.stringify(TreeCustomApiRequest),
                        url: apiUriTree,
                        success: recieveData,
                        contentType: "application/json"
                    });
                }
            },
            "themes": {
                "icons": false
            }
        },            


        "contextmenu": {
            items: Tree.pluginsArray.indexOf("contextmenu") > -1 ? Tree.treeMenuContextItems : null
        }

    });         

    var tree = Tree.treeDivIdSelector.jstree();
    function getNode(sNodeID) {
        return tree.get_node(sNodeID);
    }

    Tree.treeDivIdSelector.on('click', '.jstree-anchor', function(e) {
        Tree.onClickFunctionNode(this);
    }
    );
    //Tree.searchDivIdSelector.keyup(Tree.searchFunction);
},

The next code is in the client side......

  <script type="text/javascript">
    $(document).ready(function () {
        var dataJson = <%=sTreeViewJson%>
        Tree.Init({ dataJson: dataJson, chartDivId: $("#tree") });

        $("#btnSearch").click(function () {
            // Do the Ajax search
            Tree.searchAjaxFunction();
            //var value = document.getElementById("tree_search").value;
            //Tree.searchFunction();

    })
    });


</script>

Answer 1

Thank you Nikolay, it was a stupid mistake from me so what I added was just this to my code:

success: function (jsonData, callback )
            {
                //Goes back to the Callback with the new search data
                Tree.Init({ dataJson: jsonData, chartDivId: $("#tree"), searchDivId: $("#tree_search") });
                $('#tree').jstree(true).refresh();
            }

So I removed the

                $('#tree').jstree(true).settings.core.data = jsonData;
                $('#tree').jstree(true).deselect_node(this);
                $('#tree').jstree(true).toggle_node(this);

Know it gets my data and refreshes the table with the init function while it has my new data.

Hope this also may help someone = ).