Using $.when to wait for ajax to complete

Question

I need to wait for a certain ajax request to complete before going on. Since this request is triggered from different anchors, I wrapped it in a function. What happens after the function with the first ajax has finished, is a second ajax request.

At first, I tried to wait for the first to finish using $.ajaxComplete() which ran into an endless loop because of the second ajax request performed thereafter.

I found some samples about using $.when but none of them showed whether it's possible to use a method instead deferreds.

Here's what I'd like to do:

$.when( functionFirstAjaxCall(data) ).then( function() {
    // after first ajax request has finished, do the following:
    $.ajax({
        //...
    });
});

Does functionFirstAjaxCall() need to have a certain return value or how can I get this one working? By the way, the solution doesn't need to use $.when.

Update: I got it working by creating a custom event as Vandesh has advised.

function first() {
    $.ajax({
        // ...
        success: function (d) {
            $.event.trigger({
                type: "finished",
                data: d
            });
         }
    });
}

$(document).on('finished', second());

Anyway, would there be a simple solution by using $.when?

create a function with the second ajax and run it in success:function(){...} or done: from the first ajax? — Spokey
– Spokey, Commented Oct 7, 2013 at 13:45
success is deprecated as of JQuery 1.8 - api.jquery.com/jQuery.ajax — Vandesh
– Vandesh, Commented Oct 7, 2013 at 13:49

reyaner · Accepted Answer · 2013-10-08 07:19:09Z

3

Yes we can! Dose something like this work for you?

function first() {
    var a = $.ajax({
        // ...
    });
    return a.promise();
}

first().done(function(){
    //Im done
});

answered Oct 8, 2013 at 7:19

reyaner

2,8091 gold badge14 silver badges18 bronze badges

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

Comments

Vandesh · Accepted Answer · 2013-10-07 13:48:11Z

1

You can do something like -

$.ajax({// First AJAX call
    url: ""
}).done(function() {
    $.ajax({//Second AJAX call on completion of first
        url: ""
    }).done(function() {

    });
});

Find more on usage of $.ajax()

answered Oct 7, 2013 at 13:48

Vandesh

6,9642 gold badges32 silver badges38 bronze badges

2 Comments

Explicat Over a year ago

No, the first ajax is triggered on more occasions. The two don't go hand in hand. That's why I packed it into a function. I can't do functionFirstAjaxCall().done(function(){ ... }); can I?

Vandesh Over a year ago

You can try that using jQuery events - .bind() and .trigger() api.jquery.com/category/events Write your custom event which will trigger when your function is completed and bind the second AJAX call to that event

Collectives™ on Stack Overflow

Using $.when to wait for ajax to complete

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related