I want to override jQuery ajax function with a custom implementation for error callback so that in case of some specific errors the call is not transferred to the error block of ajax call.
Want I am thinking to do is that in custom implementation I will check for the status and if it matches I will not call the original error handler.
5 Answers
Found the answer
(function($){
// Save reference to actual jQuery ajax function
var $_ajax = $.ajax;
$.ajax = function(options){
if (options.error) {
// save reference to original error callback
var originalErrorHandler = options.error;
var errorHandlerContext = options.context ? options.context : $;
// define a custom error callback
var customErrorHandler = function(xhr,status,error) {
if(error != 'Some error'){
// call original error callback
originalErrorHandler.apply(errorHandlerContext, arguments);
}
};
// override error callback with custom implementation
options.error = customErrorHandler;
};
// call original ajax function with modified arguments
$_ajax.apply($, arguments);
};
})(jQuery);
Comments
I ran into this problem today and decided I should improve on @Varun's answer to handle the case that the consumer uses the deferred to set the error handler instead of the callback. Here is what I came up with to handle both cases:
var oldAjax = $.ajax;
var newAjax = function (options) {
var originalErrorHandler = options.error;
var errorHandlerContext = options.context ? options.context : $;
var customErrorHandler = function (xhr, status, error) {
if (xhr.status === 401) {
//do something
}
else if (xhr.status === 403) {
//do something
}
else {
if (originalErrorHandler) {
originalErrorHandler.apply(errorHandlerContext, arguments);
}
}
};
if (options.error) {
options.error = customErrorHandler;
};
var deferred = oldAjax.apply($, arguments).error(customErrorHandler);
var addErrorHandler = deferred.error;
deferred.error = function (localHandler) {
var newLocalHandler = function (xhr) {
if (xhr.status !== 401 && xhr.status !== 403) {
localHandler.apply(localHandler, arguments);
}
};
addErrorHandler.call(addErrorHandler, newLocalHandler);
return deferred;
};
return deferred;
};
$.ajax = newAjax;
Comments
jQuery has ways of overriding global ajax handlers. If you want to respond to custom error codes, for example, you could override ajaxComplete, check the status, and call a custom error handler, or the default error handler.
https://api.jquery.com/ajaxComplete/
Or override ajaxError and do your own error handling logic:
https://api.jquery.com/ajaxError/
I hope this helps!
Comments
If there is any server side error the control will definitely go to error callBack. What you can do in this scenario is filter the action that you want to perform according to your will.
$.ajax({
error:function(jqXHR, textStatus, errorThrown){
if(errorThrown == "specificErrorYouLookingFor"){
// Do the special error handling you wish to do.
}else{
// Do normal error handling.
}
}
})
Comments
See ajaxSetup https://api.jquery.com/jquery.ajaxsetup/ if you want set errorHandler for all future Ajax requests
$.ajaxSetup({
error: function(event, jqXHR, ajaxSettings, thrownError) {
// this callback called always on all ajax request errors
}
});
Or if you want do it for one call:
$.ajax({
// similar
error: function(event, jqXHR, ajaxSettings, thrownError) {
}
});