jsTree lazy search

Question

Is it possible to have a "lazy search" with JsTree where the search results can be a path that include nodes not currently in the tree? I have a large tree that I am node loading lazily and would like to be able to handle searches that include nodes not currently loaded.

So far the only thing that works for me is using the search callback and replacing all of the data in the tree and refreshing. I was wondering if there was a less hacky way to accomplish this.

The old documentation seems to imply so:

"This object can be used to make a request to the server on each search - useful if you are using async trees. That way you can return an array of IDs that need to be loaded before the actual DOM search is performed (so that all the nodes that will match the search are loaded). For example if the user searches for "string", you get that on the server side, check the database and find out that there is a node containing that string. But the node is the child of some other node, etc - so in your response you must return the path to the node (without the node itself) as ids: ["#root_node","#child_node_3"]. This means that jstree will load those two nodes before doing the client side search, ensuring that your node will be visible."

I tried testing this out with the following code. The search does trigger a url call but jsTree doesn't seem to be using the response or throwing an error if the nodes I return does not exist. I also do not see another query to the server, which presumably would be needed for nodes that don't already exist in the tree:

<html>

<body>
<div id="jstree">tree goes here</div>
<input type="button" class="button" value="Search" id="search" style="">
</body>

<link rel="stylesheet" href="static/dist/themes/default/style.min.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="static/dist/jstree.js"></script>
<script type="text/javascript">
    $("#search").click(function () {
        console.log("search");
        $("#jstree").jstree("search", "test");

    });

    $('#jstree').jstree({
        core: {
            data: {
                dataType: "json",
                url: function (node) {
                    console.log(node.id);
                    return node.id === "#" ? "http://127.0.0.1:5000/" : "http://127.0.0.1:5000/";
                }
            }
        },
        search: {
            case_insensitive: true,
            ajax: {

                url: "http://127.0.0.1:5000/",
                "data": function (n) {
                    return { id: n.attr ? n.attr("id") : 0 };

                }

            }
        },
        plugins: ["json_data", "search"]
    })
    ;


</script>

</html>

The solution at jsTree asynchronous search - trigger load new nodes doesn't seem to work for me. jsTree doesn't seem to be doing anything with the response from the server.

Answer 1

I may be very late to answer this, but here is a similar question:
jsTree AJAX search with some node childs?

The accepted answer has detailed information what gets sent to the server and what the response should be (an array of unique parent IDs).

Make sure you remove the function from search.ajax.data - this property can not be a function - it is a standard jQuery AJAX config (so it should be an object, and jstree will add a str property to it).

Btw, make sure you can actually send requests to 127.0.0.1:5000 because of the same origin policy - maybe you need to add CORS headers.

If this does not help, please provide the server response (headers and body).

jsTree lazy search

Question

1 answers

solution1
2 2015-07-27 12:47:55

jsTree lazy search

Question

1 answers

solution1 2 2015-07-27 12:47:55

solution1
2 2015-07-27 12:47:55