jsTree search with Ajax/JSON not calling URL

Question

I would really appreciate some help with the following:

I have a jsTree loaded with JSON data via a URL. All the data is preloaded.

What I need to do is change the search functionality to reload the entire tree with new JSON data via AJAX based on the user input (because I need to do more complex node searching in the backend).

As a start all I am trying to do is to get the jsTree code to call my URL. I started with the same URL as I use to originally load the tree.

However - and this is the problem for which I cannot find a solution - although the URL is called successfully to first load the tree, when I type some search text and click "Search", jsTree uses its normal internal search to highlight nodes, but the URL I provide is never called again.

The HTML is

<div>
    <form>
        <div>
             <input id="treeSearchText" type="text" />
             <button id="searchTree" class="btn">Search</button>
             <button id="clearSearch" class="btn">Clear</button>
        </div>
    </form>
</div>

<div id="myJsTree" style="height: 100%;"></div>

The jsTree initialization that I am using is:

var url = <my_url>;

$("#myJsTree").jstree({
    "json_data" : {
        async : true,
        "ajax" : {
            "url" : url
        }
     },
    "search": {
        "case_insensitive" : true,
        "ajax" : {
            "url" : url       
        }
    },
    'ui' : {
        'select_limit' : 1,
        'initially_selected' : [${myId}],
    },
    "plugins" : [ "json_data", "search", "sort", "ui", "themeroller" ],
});

And the snippet of search code:

$("#searchTree").click(function() {
    $("#myJsTree").jstree("search", $("#treeSearchText").val());
    return false;
});

I would really appreciate any help.

Thanks.

Answer 1

Did you get a solution in the end?

I'm doing the same thing at the moment - the ajax section of the search plugin options behaves just like jQuery ajax options, for me I specified type: "POST", a success function and dataType: "JSON" and my success function is recording the results in my console.

From the manual (not the best manual in the world), for each search result matched, you need to specify the path to it without including the matching nodes ID. jsTree will then load the path you give it and the inbuilt highlighting will match the text. E.g. if the entry your search matched is in the #secondchild node (3 levels down), this is what you'll need to pass to jsTree for it to load that result in your search:

Array[ '#rootnode', '#firstchild', '#secondchild' ]

This will load those three nodes with the standard data retrieval method you've specified already, if they don't already exist in the DOM. Do a few tests with your JSON results by hard coding the path you're after to see how it works.

Note: if you've defined a success method in your Ajax request, you'll need to return the data object you get in your method, which will allow jsTree to parse it and do its thing. In my case I had console.log(data) and it did nothing, because I wasn't returning the data afterwards.

EDIT

I solved my problem, instead of returning multiple arrays containing the path to each matched element you need to return a single-level array containing the unique node IDs, and the search plugin parses it as expected and loads the new ones before the client side search is performed.

See here for my explanation: https://stackoverflow.com/a/20316921/2812842