How to initiate another jQuery .ajax call based on the result from an initial .ajax call?

Question

I have a jQuery .ajax call:

    $j.ajax({
        type: "POST",
        url: "/Services/Cart.asmx/UpdateQuantity",
        data: data,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(msg) {
            var d = msg.d;

            // etc.
        },
        error: function(xhr, msg) {
            var response = JSON.parse(xhr.responseText);
            var cart = $j('#cart');
            if (response.Message) {
                cart.before(' <div class="error">' + response.Message + '</div> ');
            }
            else {
                cart.before(' <div class="error">An unexpected error occurred.</div> ');
            }
        },
        complete: function(request, settings) {
            // Some other stuff.
        }

    }); // end ajax
    alert('Initially thought this would be called after above .ajax call complete. But it is not. Rather, it is called before success etc.')

However, based on some data returned by this first ajax call, I want to initiate a second .ajax call. It appears though that due to how the callbacks are configured for the first one, it doesn't occur sequentially (i.e. where in the above the last alert('Initially...') line) so I'm not able to use the latest updated client-side DOM data.

How is it best to send off another .ajax call? I quickly did some tests within the complete event, but that didn't seem to be a go.

I've got "jQuery in Action" sitting here waiting for me to find time to dig through it to understand more of what's going on under the hood, but no time yet!

UPDATE: Erk. When the obvious doesn't first work as expected, the problem usually lies between the chair and the monitor; I'll put this one up to an all-nighter brain fart. Turns out how I originally had it set up (calling the second .ajax call within the success callback) was very obviously correct, but my second .ajax call had a small syntax error in it (and thus failed and sent me off the wrong way).

And @kgiannakakis gets noted as the answer because he/she was a) first and b) provided the hilariously understated "You can configure the call to be synchronous, but this is not a recommended technique."

Answer 1

Well the alert should go in the success callback and not after the ajax call. The default behaviour of ajax calls is asynchronous. That is, the call returns immediately and the callbacks are called at some point later at time, when the data are actually received.

You can configure the call to be synchronous, but this is not a recommended technique.

Answer 2

If you want to make another ajax request based on the result of the first, you should probably have the second ajax request in another function. That other function will get called on the success event of hte first ajax request. Something like this, though I haven't tested this to make sure it's correct:

$j.ajax({
    type: "POST",
    url: "/Services/Cart.asmx/UpdateQuantity",
    data: data,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: newSuccessFunction(xhr,msg),
    error: function(xhr, msg) {
        var response = JSON.parse(xhr.responseText);
        var cart = $j('#cart');
        if (response.Message) {
            cart.before(' <div class="error">' + response.Message + '</div> ');
        }
        else {
            cart.before(' <div class="error">An unexpected error occurred.</div> ');
        }
    },
    complete: function(request, settings) {
        // Some other stuff.
    }

}); // end ajax

function newSuccessFunction(xhr,msg) {
    var d = msg.d;
    //... etc.
    $.ajax({ //...
           });
    alert('Initially thought this would be called after above .ajax call complete. But it is not. Rather, it is called before success etc.')
}