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? — Rajesh Dixit
– Rajesh Dixit, Commented Sep 13, 2016 at 12:35
See duplicate: you're attempting to return "resp" before the ajax call has even started. It's "async". — fdomn-m
– fdomn-m, Commented Sep 13, 2016 at 14:30

Hugo G · Accepted Answer · 2016-09-13 12:06:11Z

1

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.

answered Sep 13, 2016 at 12:06

Hugo G

16.7k9 gold badges62 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rajesh Dixit · Accepted Answer · 2016-09-13 12:36:39Z

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, 2016 at 12:36

Rajesh Dixit

25k5 gold badges52 silver badges86 bronze badges

answered Sep 13, 2016 at 12:12

Cemsina Güzel

3904 silver badges14 bronze badges

Comments

Erick Jimenez · Accepted Answer · 2016-09-13 13:00:37Z

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();
    });

Collectives™ on Stack Overflow

Jquery Asynchronous call return undefined value

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related