AJAX callback functions not working

Question

Let me preface this by saying I am extremely new to AJAX/JS in general. I have an issue with undefined return values from AJAX calls. I've tried following some online tutorials or other answers on stack overflow, but the whole callback function this is not working for me. All i want is the data returned so I can use it elsewhere in my code (specifically plotting some charts). Putting the plotting code within the success block seems tacky, so I would like to avoid doing that.

I would really appreciate any help. My code is below:

function updateMe(callback) {
    var count1;
    var PointsArray = chart.getSelectedPoints();
    var xArray = [];
    var yArray = [];
    var contributions = [];
    var finished = 0;

    for(count1 = 0; count1 < PointsArray.length; count1++){
        yArray[count1] = PointsArray[count1].id;
    };

    $.ajax({
        type: 'POST',
        url: "...",
        dataType: "json",
        data: {
            csrfmiddlewaretoken: '{{csrf_token}}',
            'data[]': (yArray),
        },
        success: function(data){
            callCallback(data, callback);
        }

    });
};

function myCallback(result) {
    return result;
}

function callCallback(data, cb){
    cb(data);
};

var toParse;
toParse = updateMe(myCallback);

EDIT:

I should add that if i do

x = updateMe(myCallback)

in the console, I get the desired result. Then I can use x.responseText to extract the individual data. However if I do

x = updateMe(myCallback).responseText

I get undefined

EDIT #2 Why this is not a duplicate

The tagged question talks about using callbacks as a way to get deal with the asynchronous nature of AJAX calls. My question asks why my callback functions are not working as expected.

I tried adding that, but I see no difference. Also if I add a console.log('We're in success') within the success block, it gets triggered, and displayed. — user3479118, Jun 27 '17 at 19:37
Is there a reason you don't just call `callback(data)` inside the `success` function? — Heretic Monkey, Jun 27 '17 at 19:38
Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Jared Smith, Jun 27 '17 at 19:43
The reason why you get undefined in your program but not the console is that the ajax call hasn't finished yet. — Jared Smith, Jun 27 '17 at 19:43

jjchambl · Answer 1 · 2017-06-27T20:10:28.240

I'm not sure why you need that callback function passed into your ajax method. Wouldn't it be more intuitive to have your code be:

function callCallback(data){
  console.log(data.responseText);
};

That way there's no need to pass it into the first function, and you can call/store the data immediately rather than handing it off to a seemingly redundant function. You're trying to call the responseText from the function itself immediately, which won't work as the asynchronous callback hasn't finished yet.

[EDIT] This response--to a question of which yours is possibly a duplicate--is very in-depth, and gives a good summary of what is happening with asynchronous requests and also how to handle them based on different ES standards.

score -1 · Answer 2 · answered Jun 27 '17 at 19:34

-1

Try changin callCalback function as follows;

cb.apply(this, data)

answered Jun 27 '17 at 19:34

Volem

616
3
15

AJAX callback functions not working

2 Answers2