JSTree Search with Ajax Call / Lazy Loading

Question

I am using JSTree in my application.

I am unable to implement Search functionality with ajax call.

Here i am putting what i tried.

$(document).ready(function () {
    $("#jstree_demo_div").jstree({
        "core": {
            "data": {
                "url": "Tree/Index",
                "data": function (node) {
                    return { "id": node.id };
                }
            }
        },
        "search": {
            "url": "Tree/Index",
            "data": function (node) {
                return { "id": node };
            }
        },
        "plugins": ["search"],
    });

    $('#searchTree').on('click', function (event) {
        $("#jstree_demo_div").jstree('search', '1');
    });
});

Whenever i press button it comes to event and after that call is not made to server.

What i want is to make ajax call on search and completely recreate treeview as per search.

I am unable to understand how can i do this?

I already checked following link.

JSTree API Documentation

jsTree search with Ajax/JSON not calling URL

In above stackoverflow question i am unable to understand what is "json_data" and why and how it is used?

There is not a single example in https://www.jstree.com that uses variable like named "json_data".

Please help me to understand how JSTree Ajax call / Lazy Loading works with search functionality with example.

This is really helpful for me. Thank you in advance.

score 2 · Accepted Answer · answered Aug 19 '15 at 18:40

2

The search.ajax.data config option can not be a function - it should be an object (just like a normal jQuery AJAX config), jstree will only add a str property to that object. As for GET or POST - use whichever you want - all you need to specify as search.ajax is a valid jQuery AJAX config.

answered Aug 19 '15 at 18:40

vakata

3,726
1
17
31

Yes i tried and what about recreating JSTree in search? I mean i have set of nodes which i want to display and expand when Search is performed. – Nirav Kamani Aug 20 '15 at 03:59

score 1 · Answer 2 · answered Aug 17 '15 at 12:50

1

Change search settings to :

"search": {
    "ajax": {
         "url": url,
            }
          },

answered Aug 17 '15 at 12:50

Taher Rahgooy

6,528
3
19
30

But it is not passing the value. Apart from that why i need to write "ajax" because in loading data i not needed to write. Asking just for more understanding. Thanks. – Nirav Kamani Aug 17 '15 at 12:59
it pass the value as `?str=1`, just inspect it at the browser and see the url sent to server. I don't know, just by debugging I realized it checks for ajax, if not found it searches locally. – Taher Rahgooy Aug 17 '15 at 13:02
yes. as you said it checks for "ajax". i also found by debugging. but i was unable to understand and resolve it. Thanks. Will try to understand more by debugging JSTree.js Thanks. – Nirav Kamani Aug 17 '15 at 13:06

score 0 · Answer 3 · answered Aug 18 '15 at 01:39

Your search configuration need to correct, to search with a keyword you need to pass the keyword to your url and You should use GET method to retrive data. Try this

        // Configuring the search plugin
        "search" : {
            // As this has been a common question - async search
            // Same as above - the `ajax` config option is actually jQuery's AJAX object
            "ajax" : {
                "url" : "Tree/Search",
                // You get the search string as a parameter
                "data" : function (str) {
                    return { 
                        "operation" : "search", 
                        "q" : str 
                    }; 
                }
            }
        },

JSTree Search with Ajax Call / Lazy Loading

3 Answers3