jQuery AJAX custom function and custom callback?

Question

Heylow everyone!

I have an ajax() call like so:

$.ajax({
  type: "post",
  url: "whatever.php",
  data: {
    theData: "moo moo"
  },
  success: function(data) {
    console.log(data);
  }
});

Is it possible to wrap this inside a custom function but retain the callback?
Something like:

function customAjax(u, d, theCallbackStuff) {
  $.ajax({
    type: "post",
    url: u,
    data: d,
    success: function(data) {
      //RUN theCallbackStuff
    }
  });
}

theCallbackStuff will be something like:

var m = 1;
var n = 2;
alert(m + n + data);

So, can I hold a complete function within theCallbackStuff ? — Barrie Reader
– Barrie Reader, Commented Oct 10, 2012 at 14:00
I'm at work at the moment, so I can't try it - I was theorising in my head ;) — Barrie Reader
– Barrie Reader, Commented Oct 10, 2012 at 14:01

prodigitalson · Accepted Answer · 2017-11-07 20:52:27Z

11

EDIT:

Got a recent upvote for this and I feel compelled to state that I would no longer do it this way. $.ajax returns a promise so you can do pretty much what i just did here in a more consistent and robust way using the promise directly.

function customRequest(u,d) {
   var promise = $.ajax({
     type: 'post',
     data: d,
     url: u
   })
   .done(function (responseData, status, xhr) {
       // preconfigured logic for success
   })
   .fail(function (xhr, status, err) {
      //predetermined logic for unsuccessful request
   });

   return promise;
}

Then usage looks like:

// using `done` which will add the callback to the stack 
// to be run when the promise is resolved
customRequest('whatever.php', {'somekey': 'somevalue'}).done(function (data) {
   var n = 1,
       m = 2;

   alert(m + n + data);
});

// using fail which will add the callback to the stack 
// to be run when the promise is rejected
customRequest('whatever.php', {'somekey': 'somevalue'}).fail(function (xhr, status, err) {
   console.log(status, err);
});

// using then which will add callabcks to the 
// success AND failure stacks respectively when 
// the request is resolved/rejected
customRequest('whatever.php', {'somekey': 'somevalue'}).then(
  function (data) {
     var n = 1,
         m = 2;

     alert(m + n + data);
  },
  function (xhr, status, err) {
     console.log(status, err);
  });

Sure i do this all the time. You can either execute the callback within the actual success callack or you can assign the callback as the success callback:

function customRequest(u,d,callback) {
   $.ajax({
     type: "post",
     url: u,
     data:d,
     success: function(data) {
        console.log(data); // predefined logic if any

        if(typeof callback == 'function') {
           callback(data);
        }
     }
  });
}

Usage would look something like:

customRequest('whatever.php', {'somekey': 'somevalue'}, function (data) {
   var n = 1,
       m = 2;

   alert(m + n + data);
});

edited Nov 7, 2017 at 20:52

answered Oct 10, 2012 at 14:05

prodigitalson

60.6k10 gold badges106 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Barrie Reader Over a year ago

This is exactly what I was looking for - although shouldn't it be === ?

prodigitalson Over a year ago

you could do === but in this case it wont matter because the result of typeof will be a string.

MichaelClark Over a year ago

Best Edit I've seen all day. Thanks so much,...this is the way to go.

Milton Filho · Accepted Answer · 2012-10-10 14:01:33Z

5

    function customAjax(u, d, theCallbackStuff) {
      $.ajax({
        type: "post",
        url: u,
        data: d,
        success: theCallbackStuff 
      });
    }

customAjax(url, data, function(data){
//do something
});

answered Oct 10, 2012 at 14:01

Milton Filho

5253 silver badges17 bronze badges

1 Comment

Barry Chapman Over a year ago

I would make sure you check for existence of the function using: if(window.some_function_name_here) or if( typeof funcname == 'function' )

Barry Chapman · Accepted Answer · 2012-10-10 14:17:03Z

1

On this note, you can pass a complete function as a callback to this:

function customRequest(u,d,callback) {
   $.ajax({
     type: "post",
     url: u,
     data:d,
     success: function(data) {
        console.log(data); // predefined logic if any

        if(typeof callback == 'function') {
           callback(data);
        }
     }
  });
}



// Then call it as follows:

function initiator() {

    customRequest( '/url/to/post', 'param1=val', function() { alert( 'complete' ); })

}

Simply passing it as an anonymous function will work too.. Just for the sake of showing :)

answered Oct 10, 2012 at 14:17

Barry Chapman

6,7904 gold badges40 silver badges71 bronze badges

Collectives™ on Stack Overflow

jQuery AJAX custom function and custom callback?

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related