Jquery Asynchronous call return undefined value

Question

I have gone through many topics on stack overflow for jquery asynchronous AJAX requests. Here is my code.

funciton ajaxCall(path, method, params, obj, alerter) {
var resp = '';
$.ajax({
    url: path,
    type: method,
    data: params,
    async: false,
    beforeSend: function() {
        $('.black_overlay').show();
    },
    success: function(data){
        console.log(data);
        resp = callbackFunction(data, obj);
        if(alerter==0){
            if(obj==null) {
                resp=data;
            } else {
                obj.innerHTML=data;
            }
        } else {
            alert(data);
        }
    },
    error : function(error) {
        console.log(error);
    },
    complete: function() {
        removeOverlay();
    },
    dataType: "html"
});

return resp;
}

The problem is, when I use asyn is false, then I get the proper value of resp. But beforeSend doesn't work.

In case, I put async is true, then its beforeSend works properly, but the resp value will not return properly, Its always blank.

Is there any way to solve both problems? I would get beforeSend function and resp value both.

Thanks

Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Rajesh, Sep 13 '16 at 12:35
See duplicate: you're attempting to return "resp" *before* the ajax call has even started. It's "async". — freedomn-m, Sep 13 '16 at 14:30

score 1 · Answer 1 · answered Sep 13 '16 at 12:06

Use async:false and run the function you assigned to beforeSend manually before the $.ajax call:

var resp = '';
$('.black_overlay').show();
$.ajax({
    ...

Either that or learn how to use callback functions with asynchronous tasks. There are many nice tutorials on the web.

score 0 · Answer 2 · edited Sep 13 '16 at 12:36

0

Take the resp variable out from the function
Create one extra function respHasChanged()
when you get the data successfully, use the code resp = data;respHasChanged();

edited Sep 13 '16 at 12:36

Rajesh

24,354
5
48
79

answered Sep 13 '16 at 12:12

cemsina güzel

390
4
14

score 0 · Answer 3 · answered Sep 13 '16 at 13:00

You can restructure on this way, (why no use it in async way?)

function ajaxCall(path, method, params) {
    return $.ajax({
        url: path,
        type: method,
        data: params,
        beforeSend: function() {
            $('.black_overlay').show();
        },
        dataType: "html"
    });
}

Call in your javascript file

ajaxCall(YOUR_PATH, YOUR_METHOD, YOUR_PARAMS)
    .done(function(data) {
        console.log(data);

        // DO WHAT YOU WANT TO DO

        if (alerter == 0 && obj !== null) {
            obj.innerHTML = data;
        } else {
            alert(data);
        }
    }).fail(function(error) {
        console.log(error);
    }).always(function() {
        removeOverlay();
    });

Jquery Asynchronous call return undefined value

3 Answers3