Loading Animation when getting Ajax data

[jefftb82]

I am trying to dynamically populate the tree with an ajax call.  When I setup my code as below, all I get a tree but I can't refresh it with new data.  

    var kitId = $(".kitId").attr('id');

    var sampleTreeJson = $.parseJSON(buildSampleTree(kitId, specId));

    $("#jstree_div").jstree({

        'core': {

            'data': sampleTreeJson

        }

    });

    $("#jstree_div").jstree("refresh");

}

However, if I put a function into the data as 'data': function() { return buildSampleTree(kitId, specId);}, I just get a loading animation on my page where my tree should be.  

I have confirmed that the json string is well formed.  

Thanks, 

Jeff

[Ivan Bozhanov]

When data is used as a function you need to invoke a callback and not return a value. As shown here: http://www.jstree.com/docs/json/

In your case that means 'data' : function (node, cb) { cb(buildSampleTree(kitId, specId)); }

[jefftb82]

Thanks for your response.  I tried what you said about the callback, still doesn't work.  

The buildSampleTree function returns a json string.  Should that return type be different?  I pasted that function in there for clarity.  

$("#jstree_div").jstree({

        'core': {

            'data': function (node, cb) { cb(buildSampleTree(kitId, specId)); }

        }

    });

function buildSampleTree(kitId, specId) {

    var ret = null;

    $.ajax({

        url: '../Result/AjaxGetSamplesJson',

        async: false,

        type: "POST",

        data: JSON.stringify({ kitId: kitId, specId: specId }),

        dataType: "json",

        contentType: "application/json; charset=utf-8",

        error: function (data) { alert('Error: Could Not Reach Server'); },

        success: function (data) {

            ret = data;

        }

    });

    return ret

}

Thanks again, 

Jeff

[Ivan Bozhanov]

Read a bit about javascript and async operations - you cannot use a return value with an async operation (like AJAX) - basically now you are always returning null.
Keep in mind jstree can make the AJAX calls for you - read the jstree docs too.

Anyway, in that case your code should be something like (of course you will have to adapt this to your needs, I am working with bits and pieces here, the general idea is that you have to call cb() once the data is ready:

$("#jstree_div").jstree({

        'core': {

            'data': function (node, cb) {

                $.ajax({

                     url: '../Result/AjaxGetSamplesJson',

                     async: false,

                     type: "POST",

                     data: JSON.stringify({ kitId: kitId, specId: specId }),

                     dataType: "json",

                     contentType: "application/json; charset=utf-8",

                     error: function (data) { alert('Error: Could Not Reach Server'); },

                     success: function (data) {

                         cb(data);

                     }

                 });

            }

        }

    });

[Luis Bessa]

I'm trying to use it like you have in the USING AJAX example, but i'm not being able to get out of the loading animation. should i use function instead ?

[Ivan Bozhanov]

You should probably fix the reason why it is not working in the first place - if you have wrong data or wrong headers switching to a function won't help.
Make sure you return valid JSON, and that you return it with the correct headers. As for the function - switch to it if you so desire, but it is an alternative method of supplying data, if AJAX is the right one for you - simply get it to work.
I can not help further without seeing config & data.

Best regards,
Ivan

[Luis Bessa]

Hi!

At this moment i'm just sending in the AJAX the same JSON as the example.

It is given this error on javascript.

1. Uncaught Error: Syntax error, unrecognized expression: [{ "text" : "Root 1", "children" : true }, { "text" : "Root 2", "children" : true }] jquery.min.js:2
1. at.errorjquery.min.js:2
2. mtjquery.min.js:2
3. ktjquery.min.js:2
4. atjquery.min.js:2
5. x.fn.extend.findjquery.min.js:3
6. x.fn.x.initjquery.min.js:2
7. xjquery.min.js:2
8. (anonymous function)jstree.min.js:2
9. x.isFunction.ijquery.min.js:2
10. cjquery.min.js:2
11. p.fireWithjquery.min.js:2
12. kjquery.min.js:4
13. r

Already switched for the jquery version inside libs and with inline HTLM it is working.

On Wednesday, February 19, 2014 6:43:51 PM UTC, jefftb82 wrote:

[Luis Bessa]

this is my ajax root response function by now...

            echo '[{ "text" : "Root 1", "children" : true }, { "text" : "Root 2", "children" : true }]';
            exit;

[Ivan Bozhanov]

Make sure you also send:

header('Content-Type: application/json; charset=utf8');

[Luis Bessa]

That was it.. :/ silly me :D thank you

[jefftb82]

Hey Ivan, 

Ok I was able to make that work, it loads with the Ajax request.  However, my original intent was to allow a user to change a dropdown control to filter what is contained in the tree(which is why I needed the Ajax call to fill the tree).  I have the change event bound to my dropdown and have confirmed that my function(the one from above that you helped with) gets called when the dropdown value changes and new data is received from the server, but the tree nodes do not get updated.  Is there something that has to be done to wipe out and rebuild the tree nodes?  

Thanks for all your help,

Jeff

[jefftb82]

Nevermind, I figured it out.  Just had to put jstree.("destroy") before the ajax call.  

Thanks again!

Jeff