Menu
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:
Using both the data & ajax config options
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>
Even I copy the sample code from jstree.com into jsfiddle it won't work. I guess I am missing something somewhere....
846
According to the AJAX model, web applications can send and retrieve data from a server asynchronously without interfering with the display and the behavior of the existing page. Many developers use JSON to pass AJAX updates between the client and the server.
Approach: To solve this problem, we will first consider a JSON file named “capitals. json” and try to get this JSON data as a response using AJAX. Then we will create an HTML file “capitals. html” which contains a table which we will use to populate the data we are getting in response.
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/
184
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
