jQuery Wait until async ajax calls are finished

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

Answers:

Answer

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

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

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

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.