Search code examples
phpjqueryjstreejstree-search

jsTree asynchronous search - trigger load new nodes


I have a nicely running implementation of jsTree running on a project of mine. The JSON data is provided by PHP/Ajax. I've run into some trouble while using the search plugin.

jsTree's search plugin documentation says:

so in your response you must return the path to the node (without the node itself) as ids: ["#root_node","#child_node_3"]

...so, my server side search function is returning a path to the matched node like so (yes, I'm json_encodeing it):

Array( '#1', '#2', '#3', '#5' ); // to match node #10 (leaf node) at the end

When these values already exist in the DOM, the client side search functionality works fine, but I am having trouble getting jsTree to follow the route provided in this array (or arrays) to populate the trees when the elements don't already exist (e.g. when only the root node is open).

I have seen similar questions to this on Stack, but none have any answers. I'm re-posting because I need to understand how this works and haven't found much information past the search plugin docs about how to use jsTree with asynchronous searching.

Essentially what I want it to do is use the array my search function returns to trigger jsTree's loading event (something like load_node_json) - I would've figured that this should work straight out of the box but I'm having trouble with it. I've pretty much just plugged in the example code from the jsTree documentation.


Solution

  • I've figured this out. My problem was that I was returning multiple arrays containing the path to each matched node like this:

    Array(
        Array('#root', '#child', '#sub-child'),
        Array('#root', '#child', '#second-sub')
    )
    

    As it turns out, jsTree's search plugin A only expects a single-level array, and B will load all nodes listed in that array, the path order doesn't have to be perfectly accurate like the documentation might suggest.

    So instead, in my JSON I'm returning an array containing unique node IDs like this:

    Array( '#root', '#child', '#sub-child', '#second-sub' )
    

    ...and the search plugin is loading the nodes as expected.

    Nothing fancy in the end, but I think the jsTree documentation should be more descriptive on this matter as I've seen others with the same problem and no answers.