jQuery Wait until async ajax calls are finished

Question

Hi I have 2 ajax calls in my script, I need them run asnyc to spare time, but I need the second to wait until the first is finished.

$.ajax({
        type: "POST",
        url: "getText.asmx/ws_getText",
        data: parO1,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            alert(msg.d.data);
        }
        , error: function () {
            chyba("chyba v požadavku", "df");
        }
    });
    if (parO2.length > 0) {
        $.ajax({
            type: "POST",
            url: "getText.asmx/ws_getText",
            data: parO2,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                /*WAIT UNTIL THE FIRST CALL IS FINISHED AND THAN DO SOMETHING*/
            }
        , error: function () {
            chyba("chyba v požadavku", "df");
        }
        });

So any ideas? Thanks

Answer 1

If using jQuery 1.5+, you can use jQuery.when() to accomplish this. Something like (shortened the ajax calls for brevity, just pass the objects as you're doing above)

$.when($.ajax("getText.asmx/ws_getText"), 
       $.ajax("getText.asmx/ws_getText")).done(function(a1,  a2){

   // a1 and a2 are arguments resolved for the 
   // first and second ajax requests, respectively
   var jqXHR = a1[2]; // arguments are [ "success", statusText, jqXHR ]
});

You don't know in which order they will return so if you were rolling this by hand, you would need to check the state of the other request and wait until it has returned.

Answer 2

You need to wire up the second call to be contained within the callback of your first ajax call. Like so:

success: function(msg)
{
    alert(msg.d.data);

    if(par02.length > 0)
    {
        // Your 2nd ajax call
    }
},

Since JavaScript doesnt run in multiple threads on the client, you can't block the thread until certain conditions are met.

Answer 3

Using jquery

$.ajax({
        type: "POST",
        async:false, // ** CHANGED **
        url: "getText.asmx/ws_getText",
        data: parO1,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            alert(msg.d.data);
        }
        , error: function () {
            chyba("chyba v požadavku", "df");
        }
    });

Answer 4

Here is another answer on running dual ajax requests. Like Tejs, the user makes an ajax call within the success method...

The poster states You're better off having the success method launch a new ajax request.."

Having two $.ajax() calls in one script