All geek questions in one place

How to make json ajax call in jsTree

I want to make an ajax call to get data for results nodes. In my code example (see here), the ajax call is made, but the server does not return anything (verified using firebug). But if I use the same url in a web browser I can save the json file.

My questions:

  • How to make ajax call work so return values ​​are displayed in jsTree? It works beautifully here - search Using both the data & ajax config options
  • how to pass ajax parameters
    • would be the name of the parent / parent ( basics for the first node results)
    • the second will be the parent name node ( login for the first node results)

See my code below or use 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 to jsfiddle , this will not work. I guess I'm missing something ...

+6
source share
1 answer

Try not to make Ajax calls from your server to another server - this will lead to the exclusion of cross-domain security. There are ways around this (JSONP), but it's easier to just request data from your own server.

After you sort your ajax request, you probably want to add some attributes to your “result” nodes so that ajax has some data that it can connect to, for example. Identifiers. Sort of:

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

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

 "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 lead to an Ajax request, for example: http: // myserver / my / local / json /? Parent = login & grandparent = Basics & id = 123

Hope this helps.

Edit: here is the updated JsFiddle for you: http://jsfiddle.net/robgallen/3uCX3/

+12
source

Source: https://habr.com/ru/post/892807/

More articles:


All Articles