jsTree & ajax json call

how to set up ajax call to get data for results nodes

by robgallen

HTML

<script src=" &lt;script type=&quot;text/javascript&quot; src=&quot;http://static.jstree.com/v.1.0pre/jquery.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;http://static.jstree.com/v.1.0pre/_docs/syntax/!script.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;http://static.jstree.c"></script>
<script src="http://static.jstree.com/v.1.0pre/jquery.hotkeys.js"></script>
<script src="http://static.jstree.com/v.1.0pre/jquery.jstree.js"></script>
<div id="jstree"></div>

JavaScript

var data = [{
    "data": "Folder 1",
    "state": "closed",
    "attr": {
        "id": "node-123"
    }}, {
    "data": "Folder 2",
    "state": "closed",
    "attr": {
        "id": "node-456"
    }}];
// context menu
var createContextMenu = function(node) {
    var menu = {
        "rename": false,
        "refresh": {
            "label": "Refresh",
            action: function(obj) {
                this.refresh(obj);
            }
        },
        "remove": false,
        "ccp": false
    };

    return menu;
};

$(function() {
    $("#jstree").jstree({
        contextmenu: {
            items: function(node) {
                return createContextMenu(node);
            }
        },
        "json_data": {
            "data": data,
            "ajax": {
                "url": "/echo/json/",
                "data": function(n) {
                    // the result is fed to the AJAX request 'data' option
                    return {
                        "id": n.attr ? n.attr("id").replace("node-", "") : 1,

                    };
                }
            }
        },
        "plugins": ["themes", "json_data", "contextmenu"]
    });
});