I am using $.ajax to make a post request. Then, I am trying to call a function before success or failure of the ajax request. Right now my approach is like following

var someCallback = function() {
     //do something
};
var Success = false;
$.ajax({
    type: "POST",
    url: "/some/service",
    dataType: "text",
    data: JSON.stringify(someData),
    contentType: "application/json; charset=utf-8",
    success: function (data) {
        someCallBack(); //<--- this is the function
        Success = true;//doesnt goes here
    },
    error: function (textStatus, errorThrown) {
        someCallBack();
        Success = false;//doesnt goes here
    }

});

The thing is, i need to run someCallBack() after the ajax request pletes irrespective of whether it succeeds or fails but before success or error callback is called. I dont want to use ajaxStart and ajaxStop in this scenario. I looked at 'plete' callback, but it is only called after error or success. I don't want to call the someCallBack() at two places. Any Suggestions, Please.

I am using $.ajax to make a post request. Then, I am trying to call a function before success or failure of the ajax request. Right now my approach is like following

var someCallback = function() {
     //do something
};
var Success = false;
$.ajax({
    type: "POST",
    url: "/some/service",
    dataType: "text",
    data: JSON.stringify(someData),
    contentType: "application/json; charset=utf-8",
    success: function (data) {
        someCallBack(); //<--- this is the function
        Success = true;//doesnt goes here
    },
    error: function (textStatus, errorThrown) {
        someCallBack();
        Success = false;//doesnt goes here
    }

});

The thing is, i need to run someCallBack() after the ajax request pletes irrespective of whether it succeeds or fails but before success or error callback is called. I dont want to use ajaxStart and ajaxStop in this scenario. I looked at 'plete' callback, but it is only called after error or success. I don't want to call the someCallBack() at two places. Any Suggestions, Please.

• javascript
• jquery
• ajax

• Why do you need it to be called before the success or error callbacks? What functional dependency is there? – Bergi Commented Nov 14, 2014 at 0:22
• Use promises syntax - then you can use .always(), followed by .done() and .fail() – zerkms Commented Nov 14, 2014 at 0:23

4 Answers 4

I think you're looking for ajax' deferred interface, which has an always method. And you can chain your success/error handlers after that - though you cannot use those that go into the options object.

$.ajax({
    type: "POST",
    url: "/some/service",
    dataType: "text",
    data: JSON.stringify(someData),
    contentType: "application/json; charset=utf-8"
})
.always(someCallBack)
.done(function (data) {
    var Success = true; // goes here after someCallBack()
})
.fail(function (textStatus, errorThrown) {
    var Success = false; // goes here after someCallBack()
});

AJAX supports beforeSend

$.ajax({
  url: "http://example.",
  beforeSend: function( xhr ) {
    xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
  }
}).always(function() {
   callback();
});

I misread your question. I sounds like you need .always() ?

$.ajax returns a $.Deferred (more specifically, a jqXHR), which you can use to define your callbacks. In your case, the advantage to this over defining callbacks within the ajax setting object is that your callbacks will be executed in the order that they are defined:

($.Deferred() behaves just like your $.ajax(settings) call)

Success:

$.Deferred()
  .always(function() { console.log('always'); })
  .done(function() { console.log('done'); })
  .fail(function() { console.log('fail'); })
  .resolve();
// "always"
// "done"

Failure:

$.Deferred()
  .always(function() { console.log('always'); })
  .done(function() { console.log('done'); })
  .fail(function() { console.log('fail'); })
  .reject();
// "always"
// "fail"

Likewise, if .always is defined last, it will execute last:

$.Deferred()
  .done(function() { console.log('done'); })
  .fail(function() { console.log('fail'); })
  .always(function() { console.log('always'); })
  .resolve();
// "done"
// "always"

You just need to bind 2 ajax events: ajaxSend and ajaxComplete. For example

$(document).bind("ajaxSend", function(){
    $("#loading").show();
}).bind("ajaxComplete", function(){
    $("#loading").hide();
});