CODEWITHSUNDEEP
jquery-pluginsjqueryjstree
Radek
Radek

Reputation: 11091

How to make json ajax call in jsTree

I want to make ajax call to get data for results nodes. In my sample code (see here) the ajax call is made but the server doesn't return any thing (tested using firebug) But if I use the same url in a web browser I can save the json file.

My questions are:

See my code below or use the fiddle

<html>
  <head>
    <title>jsTree & ajax</title>

<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.js"></script>
<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/_docs/syntax/!script.js"></script>
<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.cookie.js"></script>
<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.hotkeys.js"></script>
<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.jstree.js"></script>

    <script type='text/javascript'>
        data = [
                    {
                        "data" : "Basics",
                        "state" : "closed",
                                            "children" : [ {
                                                                "data" : "login",
                                                                    "state" : "closed",
                                                                    "children" : [ "login", {"data" : "results", "state" : "closed"} ]
                                                                    }   , 
                {
                "data" : "Basics",
                    "state" : "closed",
                    "children" : [ "login", "something",{"data" : "results", "state" : "closed"} ]
                    }    ]
                    },
                    {
                        "data" : "All",
                        "state" : "closed",
                "children" : [ {
                "data" : "AddCustomer",
                    "state" : "closed",
                    "children" : [ "login","Add", {"data" : "results", "state" : "closed"} ]
                    }   ]
                    }
                ]
$(function () {
        $("#jstree").jstree({
            "json_data" : {
                "data" : data ,
                "ajax" : { "url" : "http://www.jstree.com/static/v.1.0pre/_docs/_json_data.json" }
            },
            "plugins" : [ "themes", "json_data" ]
        });
    });
    </script>
  </head>
  <body>
<div id="jstree"></div>
  </body>
</html>

Update 1

Even I copy the sample code from jstree.com into jsfiddle it won't work. I guess I am missing something somewhere....

Upvotes: 6

Views: 17021

Answers (1)

Space Monkey
Space Monkey

Reputation: 1041

Try not to make Ajax calls from your server to another server - this will result in a cross-domain security exception. There are ways around it (JSONP) but it is simpler to just request data from your own server.

Once you've sorted out your ajax request, you probably want to add some attributes to your "results" nodes so that the ajax has some data it can hook into, e.g. IDs. Something like:

"data": "results", "state": "closed", "attr": { "id": "node-123" }

Then you can add a handler for the ajax data option:

"ajax": {
    "url": "/my/local/json/",
    "data": function(n) {
        // get parent / grandparent node
        var lists = $(n).parents('ul');
        var p = $(lists[0]).prev('a');
        var gp = $(lists[1]).prev('a');
        // the result is fed to the AJAX request 'data' option
        return {
            "parent": $.trim(p.text()),
            "grandparent": $.trim(gp.text()),
            "id": n.attr ? n.attr("id").replace("node-", "") : 1,

        };
    }
}

This should result in an Ajax request such as: http://myserver/my/local/json/?parent=login&grandparent=Basics&id=123

Hope that helps.

Edit: here's an updated JsFiddle for you: http://jsfiddle.net/robgallen/3uCX3/

Upvotes: 12

Related Questions