Double ajax request response

Question

I'm using ajax successives requests and I need do a callback when all the successives requests are done

function doAjaxRequest(data, id) {
    // Get payment Token
    return $.ajax({
        type: "POST",
        url: 'exemple1.php',
        data: data
        success: function(msg){
            $.ajax({
                type: "POST",
                url: 'exemple2.php',
                data: msg,
                success: function(msgr) {
                    document.getElementById(id).value=msgr;
                },
                error:function (xhr, status, error) {
                    //Do something
                }
            });
        },
        error:function (xhr, status, error) {
            //Do something
        }
    });
}

$.when(
    doAjaxRequest(data, "input-1"),
    doAjaxRequest(otherData, "input-2")
).done(function(a1, a2){
    //Need do something when both second ajax requests (example2.php) are finished
}

With this code, the done function is call before my calls to "exemple2.php" are succeeded.

How can I wait for that?

Thanks for answering!

Answer 1

function doAjaxRequest(data, id) {
    // Get payment Token
    return new Promise(function(resolve,reject){
        $.ajax({
        type: "POST",
        url: 'exemple1.php',
        data: data
        success: function(msg){
            $.ajax({
                type: "POST",
                url: 'exemple2.php',
                data: msg,
                success: function(msgr) {
                    document.getElementById(id).value=msgr;
                    resolve();
                },
                error:function (xhr, status, error) {
                    //Do something
                    reject();
                }
            });
        },
        error:function (xhr, status, error) {
            //Do something
            reject();
        }
    });
    });
}



Promise.all([
    doAjaxRequest(data, "input-1"),
    doAjaxRequest(otherData, "input-2")])
.then(function(values){
    //Need do something when both second ajax requests (example2.php) are finished
}

Answer 2

Your sub ajax request is independant of the first ajax result, then the call to example2 is completely separated from the $.when() promise.abort Just try to use the fact that jquery $.ajax return promise like object Here my code from plnkr

// Code goes here
function doAjaxRequest(data, id) {
    // Get payment Token
    return $.ajax({
        type: "GET",
        url: 'example1.json',
        data: data
    }).then(function(msg, status, jqXhr) {
      return $.ajax({
          type: "GET",
          url: 'example2.json',
          data: msg
      });
    }).done(function(msgr) {
        console.log(msgr);
        return msgr;
    });
}

var data = {foo:'bar'};
var otherData = {foo2:'bar2'};

$.when(
    doAjaxRequest(data, "input-1"),
    doAjaxRequest(otherData, "input-2")
).done(function(a1, a2) {
    console.log(a1, a2);
    //Need do something when both second ajax requests (example2.php) are finished
});

Attention, I replace POST by GET and use exampleX.json files for my tests on plnkr

You can test it here : https://plnkr.co/edit/5TcPMUhWJqFkxbZNCboz

Answer 3

Return a custom deferred object, eg:

function doAjaxRequest(data, id) {
    var d = new $.Deferred();
    // Get payment Token
    $.ajax({
        type: "POST",
        url: 'exemple1.php',
        data: data
        success: function(msg){
            $.ajax({
                type: "POST",
                url: 'exemple2.php',
                data: msg,
                success: function(msgr) {
                    document.getElementById(id).value=msgr;
                    d.resolveWith(null, [msgr]); // or maybe d.resolveWith(null, [msg]);
                },
                error:function (xhr, status, error) {
                    //Do something
                    d.reject();
                }
            });
        },
        error:function (xhr, status, error) {
            //Do something
            d.reject();
        }
    });
    return d;
}

Now, i'm not sure what is your expected datas passed to $.when().done() callback.