Extending jQuery ajax success worldwide

Question

I am trying to create a global handler that is called before the ajax callback. I make a lot of ajax calls with my application, and if this is an error, I return a certain structure, so I need to run something before success works to check the response data to see if it contains an error code bit, e.g. 1 / 0

Response example

{"code": "0", "message": "your code is broken"} 

or

 {"code": "1", "data": "return some data"} 

I can’t find a way to do this in jQuery out of the box, looked at prefilters, ajaxSetup and other available methods, but they didn’t quite pull it out, the rates I could come up with is to hack ajax itself a bit:

 var oFn = $.ajax; $.ajax = function(options, a, b, c) { if(options.success) { var oFn2 = options.success; options.success = function(response) { //check the response code and do some processing ajaxPostProcess(response); //if no error run the success function otherwise don't bother if(response.code > 0) oFn2(response); } } oFn(options, a, b, c); }; 

I have been using this for a while and it works great, but it was interesting if there is a better way to do this or something that I missed in jQuery docs.

Answer 1

You can create your own AJAX handler instead of using ajax by default:

 var ns = {}; ns.ajax = function(options,callback){ var defaults = { //set the defaults success: function(data){ //hijack the success handler if(check(data)){ //checks callback(data); //if pass, call the callback } } }; $.extend(options,defaults); //merge passed options to defaults return $.ajax(options); //send request } 

therefore your call instead of $.ajax you are now using;

 ns.ajax({options},function(data){ //do whatever you want with the success data }); 

Answer 2

This solution transparently adds a custom success handler to every call to $.ajax() using the duck punching method

 (function() { var _oldAjax = $.ajax; $.ajax = function(options) { $.extend(options, { success: function() { // do your stuff } }); return _oldAjax(options); }; })(); 

Answer 3

Here are some suggestions:

 var MADE_UP_JSON_RESPONSE = { code: 1, message: 'my company still uses IE6' }; function ajaxHandler(resp) { if (resp.code == 0) ajaxSuccess(resp); if (resp.code == 1) ajaxFail(resp); } function ajaxSuccess(data) { console.log(data); } function ajaxFail(data) { alert('fml...' + data.message); } $(function() { // // setup with ajaxSuccess() and call ajax as usual // $(document).ajaxSuccess(function() { ajaxHandler(MADE_UP_JSON_RESPONSE); }); $.post('/echo/json/'); // ---------------------------------------------------- // or // ---------------------------------------------------- // // declare the handler right in your ajax call // $.post('/echo/json/', function() { ajaxHandler(MADE_UP_JSON_RESPONSE); }); });​ 

Work: http://jsfiddle.net/pF5cb/3/

Answer 4

Here is an example:

 $.ajaxSetup({ success: function(data){ //default code here } }); 

Feel free to search the documentation in $.ajaxSetup()

Answer 5

this is your ajax method call

  function getData(newUrl, newData, callBack) { $.ajax({ type: 'POST', contentType: "application/json; charset=utf-8", url: newUrl, data: newData, dataType: "json", ajaxSuccess: function () { alert('ajaxSuccess'); }, success: function (response) { callBack(true, response); if (callBack == null || callBack == undefined) { callBack(false, null); } }, error: function () { callBack(false, null); } }); } 

and after that the successful success or success of the method

 $(document).ajaxStart(function () { alert('ajax ajaxStart called'); }); $(document).ajaxSuccess(function () { alert('ajax gvPerson ajaxSuccess called'); });