jquery.when done doesn't work: it's executed immediately

Question

I've coded this in jQuery 1.7:

$.when($.ajax({
    type: "GET",
    url: internalOrderServiceURL,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: $.proxy(this.retrieveInternalOrderSuccess, this),
    error: $.proxy(this.retrieveInternalOrderError, this)
}), $.ajax({
    type: "GET",
    url: rejectionReasonServiceURL,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: $.proxy(this.retrieveRejectionReasonSuccess, this),
    error: $.proxy(this.retrieveRejectionReasonError, this)
})

).done(

$.ajax({
    type: "GET",
    url: salesOrderInfoServiceURL,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: $.proxy(this.retrieveServiceItemSuccess, this),
    error: $.proxy(this.retrieveServiceItemError, this)
})

);

However the callback retrieveServiceItemSuccess is executed before retrieveInternalOrderSuccess and retrieveRejectionReasonSuccess. Could anybody tell me what's wrong with that?

I've changed the code to this:

$.when($.ajax({
                            type : "GET",
                            url : internalOrderServiceURL,
                            contentType : "application/json; charset=utf-8",
                            dataType : "json",
                            success : $.proxy(this.retrieveInternalOrderSuccess, this),
                            error : $.proxy(this.retrieveInternalOrderError, this)
                        }), $.ajax({
                            type : "GET",
                            url : rejectionReasonServiceURL,
                            contentType : "application/json; charset=utf-8",
                            dataType : "json",
                            success : $.proxy(this.retrieveRejectionReasonSuccess, this),
                            error : $.proxy(this.retrieveRejectionReasonError, this)
                        })).done(function() {
                            $.ajax({
                                type : "GET",
                                url : salesOrderInfoServiceURL,
                                contentType : "application/json; charset=utf-8",
                                dataType : "json",
                                success : $.proxy(this.retrieveServiceItemSuccess, this),
                                error : $.proxy(this.retrieveServiceItemError, this)
                            })
                        });

but this time, the first callback retrieveInternalOrderSuccess executes then the second callback executes (retrieveRejectionReasonSuccess) - the order of execution of these two callbacks is random. However the third callback does NOT execute. Could anybody advise what's wrong?

I have tried to add this:

var self = this;
                        $.when($.ajax({
                            type : "GET",
                            url : internalOrderServiceURL,
                            contentType : "application/json; charset=utf-8",
                            dataType : "json",
                            success : $.proxy(this.retrieveInternalOrderSuccess, this),
                            error : $.proxy(this.retrieveInternalOrderError, this)
                        }), $.ajax({
                            type : "GET",
                            url : rejectionReasonServiceURL,
                            contentType : "application/json; charset=utf-8",
                            dataType : "json",
                            success : $.proxy(this.retrieveRejectionReasonSuccess, this),
                            error : $.proxy(this.retrieveRejectionReasonError, this)
                        })).done(function() {
                            $.ajax({
                                type : "GET",
                                url : salesOrderInfoServiceURL,
                                contentType : "application/json; charset=utf-8",
                                dataType : "json",
                                success : function(oResult) {
                                    self.retrieveServiceItemSuccess(oResult);
                                },
                                error : function(oResult) {
                                    self.retrieveServiceItemError(oResult);
                                },
                            })
                        });

and this time the callbacks are called in the right order. Can anybody clarify this?

This question actually answered exactly a problem I was having, so while unlikely to help someone else, it did. — Anthony Potts, Jun 27 '13 at 02:43

Matt Ball · Answer 1 · 2013-04-10T20:07:44.427

Function parameters are always evaluated before they are passed. You need to pass a function which makes the second ajax call.

$.when($.ajax({
    type: "GET",
    url: internalOrderServiceURL,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: $.proxy(this.retrieveInternalOrderSuccess, this),
    error: $.proxy(this.retrieveInternalOrderError, this)
}), $.ajax({
    type: "GET",
    url: rejectionReasonServiceURL,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: $.proxy(this.retrieveRejectionReasonSuccess, this),
    error: $.proxy(this.retrieveRejectionReasonError, this)
})

).done(function () {

    $.ajax({
        type: "GET",
        url: salesOrderInfoServiceURL,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: $.proxy(this.retrieveServiceItemSuccess, this),
        error: $.proxy(this.retrieveServiceItemError, this)
    })
}
);

To make this more readable and obvious, consider breaking each .ajax() call into its own function:

function firstAjax() { /* ... */}
function secondAjax() { /* ... */}
function thirdAjax() { /* ... */}

$.when(firstAjax, secondAjax).done(thirdAjax);

Just make sure that the individual functions return the value returned by $.ajax().

I've made your changes. But this time firstAjax is called, secondAjax is called whilst thirdAjax (the function in the done part) is not called. Could you please advise? — marco_sap, Apr 10 '13 at 20:16
Looks fine except that `this` in `thirdAjax` isn't the same object as before. — Matt Ball, Apr 10 '13 at 20:51

Kevin B · Answer 2 · 2013-04-10T20:28:31.287

2

.done needs a function to execute, not a promise object.

.done(function(){

    $.ajax({
        type: "GET",
        url: salesOrderInfoServiceURL,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: $.proxy(this.retrieveServiceItemSuccess, this),
        error: $.proxy(this.retrieveServiceItemError, this)
    })

});

this is still out of context though.

edited Apr 10 '13 at 20:28

answered Apr 10 '13 at 20:03

Kevin B

94,570
16
163
180

I'm afraid it doesn't work. I've coded this: – marco_sap Apr 10 '13 at 20:15
I can't fix `doesn't work`. – Kevin B Apr 10 '13 at 20:16
You are absolutely right Kevin, let me explain you what's wrong with that. I can't seem to be able to paste any code in this section, let me figure out what to do... – marco_sap Apr 10 '13 at 20:26
@marco_sap At this point i don't think i need more code, i need to know "why" it isn't getting to the done. Most likely the `fail` callback is being triggered, within which there will be information on why it isn't working. – Kevin B Apr 10 '13 at 20:27
I've just copied the whole code I've written in the question above. The first two callbacks are successfully executed. The callback in the done branch is NOT execute. I set a breakpoint in chrome in the callbacks retrieveInternalOrderSuccess , retrieveRejectionReasonSuccess, retrieveServiceItemSuccess,retrieveServiceItemError and I'm 100% sure that retrieveServiceItemSuccess and retrieveServiceItemError are NOT executed. – marco_sap Apr 10 '13 at 20:32
if you put a breakpoint on the third ajax request, does it get there? – Kevin B Apr 10 '13 at 20:37
I've written: debugger; and it DOES NOT stop. As soon as I remove the function(){ ... } which I added in the done branch, it stops but this time callbacks are executed randomly... – marco_sap Apr 10 '13 at 20:37
function(){ ... } is definitely required. Are any of the error callbacks happening? – Kevin B Apr 10 '13 at 20:39
None of the callback errors are executed. If I add function(){} to the done branch, this callback DOES not executes. No error is logged in Chrome console, all appears to be fine. – marco_sap Apr 10 '13 at 20:44
What you are describing is an error happening in one of the first two ajax requests, but then contradicting that by saying neither are reaching the error handler. something isn't quite adding up here. Stupid question, but have you received the error (that will happen) stating that `retrieveServiceItemSuccess` isn't defined on `this`? – Kevin B Apr 10 '13 at 20:46
Nope, this.retrieveServiceItemSuccess works okay, no error at all. However I think that there's an issue in the way I define the success and error callback. – marco_sap Apr 10 '13 at 20:56
Let me add this change to the question – marco_sap Apr 10 '13 at 20:56
@marco_sap There's definitely an issue with the way you define the success and error callback, but it sounds like to me you aren't even reaching the third `$.ajax` – Kevin B Apr 10 '13 at 20:56
I've posted a working solution above. Could you explain me why that works? – marco_sap Apr 10 '13 at 21:01
It works because inside of .done(), `this` is defined as something else, not what you expect it to be.\ – Kevin B Apr 10 '13 at 21:02

jquery.when done doesn't work: it's executed immediately

2 Answers2