loading data through ajax not working for me

[Jonathan Salomon]

Hi all,

I am using jsTree to map a directory structure on a Windows machine and am using node.js on that machine to return the JSON document in alternative format. I am trying to use the dynamic update of data through AJAX to avoid having to build the entire tree from the beginning, which can take a couple of minutes in some cases. However I struggling to get this to work and I hope someone can help me out.

The problem is that after jsTree retrieves the initial JSON doc (in Chrome) it gives me this (latest jsTree source from GitHub):

1. Uncaught object jquery.js?body=1:1472
1. Sizzle.errorjquery.js?body=1:1472
2. tokenizejquery.js?body=1:2086
3. selectjquery.js?body=1:2474
4. Sizzlejquery.js?body=1:881
5. jQuery.fn.extend.findjquery.js?body=1:2685
6. jQuery.fn.initjquery.js?body=1:2802
7. jQueryjquery.js?body=1:76
8. (anonymous function)jstree.js?body=1:1119
9. proxyjquery.js?body=1:557
10. firejquery.js?body=1:3100
11. self.fireWithjquery.js?body=1:3212
12. donejquery.js?body=1:9311
13. callback

This is the initialization of jsTree which is very much like the example on http://www.jstree.com/docs/json/ 

          $('#jstree').jstree({ 'core' : {

              'multiple' : false,

              'data' : {

                'url' : function (node) {

                  return node.id==='#' ?

                    nodejs_agent_url+'/dirtree?root_path='+encodeURIComponent(device_path)+'&device='+encodeURIComponent(device_name)+'&type='+device_type :

                    nodejs_agent_url+'/dirtree?root_path='+encodeURIComponent(node.id)+'&device='+encodeURIComponent(device_name)+'&type='+device_type;

                },

                'data' : function (node) { return { 'id' : node.id }; }

              }

            }

          });

This is an example of data that is returned by the node.js agent that runs on the Windows machine in alternative format:

[

    {

        "id": "C:\\Users\\joni\\Desktop",

        "parent": "#",

        "text": "Desktop",

        "state": { "opened": true, "selected": false, "disabled": false },

        "children": false

    },

    {

        "id": "C:\\Users\\joni\\Desktop\\Private",

        "parent": "C:\\Users\\joni\\Desktop",

        "text": "Private",

        "state": { "opened": false, "selected": false, "disabled": false },

        "children": true

    }

]

What am I doing wrong? I would be grateful for your insights.

Thanks!

Jonathan

[Ivan Bozhanov]

This is probably due to some invalid character in the data that you supply, but the part that you have supplied works just fine, so to help you debug I will need the full data, if you do not get a tree at all - read below.
Make sure you are using the uncompressed jstree version and tell me the line number of the error (the line you specified deals with HTML, not JSON) - so probably you do not return proper JSON headers. Try using this:
...
'data' : {
  'dataType' : 'json',
  'url' : function (node) { ...

Btw - if you are using lazy loading the regular JSON format may be better, but anyway - that is up to you.

Best regards,
Ivan

[Jonathan Salomon]

Hi Ivan,

I was just stupid and did not set the correct headers nor expected dataType. After I fixed that it worked just fine, but I just couldn't cancel the post to this group.

Anyway thanks for your reply and also for a great job both in writing a very useful plugin and for actively maintaining it (which may be even more important)!

Best wishes,

Jonathan