CODEWITHSUNDEEP
javascriptjqueryajax
coding_idiot
coding_idiot

Reputation: 13734

JQuery ajax success fired twice, because of .done callback

I have some legacy code, which aborts ajax requests in a scenario & then after user-response, resends that request.

function resendLastAjaxRequest(ajaxRequest, ajaxSettings){
    if(ajaxSettings != undefined){
        $.ajax(ajaxSettings).done(function ( data ) {
            ajaxSettings.success(data);
        });
    }

Now, the above code fires the success handler for the request twice, but's its been there for more than a year & no one encountered it. Is it because of jquery version updates. We're currently using 2.0.3 I don't know when exactly was jquery updated, but may be in earlier versions done was fired instead of success. Did some digging but couldn't find any reason why it might have worked for so long, please help.

Update

what is difference between success and .done() method of $.ajax

It contains a comment saying

ok, it's jQuery 1.8 :) Since $.ajax return a promise from jQuery 1.5 this is a simple substitution for a matter of consistency (using the interface of deferred): done() take place of success(), fail() for error() and always() for complete()

that means if done is called, then we have to trigger success explicitly. This might be the reason why it worked for so long. But now, before the done fires the success handler is already called & then the done callback calls the success handler again.

Any suggestions on how to change/modify the code such that success is called only once ?

EDIT

ajaxSettings looks like this :

accepts: Object
async: true
cache: false
complete: function (request, status)
contentType: "application/x-www-form-urlencoded; charset=UTF-8"
contents: Object
converters: Object
crossDomain: false
dataTypes: Array[1]
error: function (request, status){flatOptions: Object global: true hasContent: false isLocal: false jsonp: "callback"
jsonpCallback: function (){var e=hn.pop()||x.expando+"_"+Yt++;return this[e]=!0,e}loadingdisplay: trueprocessData: true
responseFields: Object
success: function (htmlData) {type: "GET"

Upvotes: 0

Views: 2398

Answers (1)

OxyDesign
OxyDesign

Reputation: 754

Like I said in the comments, I think previously you had a jQuery version lower than 1.5 (without .done() implemented) so the success method is invoked as a callback then .done() throw an error in the console without breaking anything (like undefined is not a function). So in this case, you have an error in the console and only one callback function called.

Demo with jQuery 1.4.4 : jsfiddle

In the console :

1 error : undefined is not a function (because of .done())

and

1 log : Object (datas from the call)

Upvotes: 1

Related Questions