How to write a jQuery function with a callback?

Question

I have the following function:

function loadProjects(pID) {

    $.ajax({
        url: myURL,
        success: function (dataJS) {XXXXXXXXXXXXXXXX}
    });
}

I call this function like so loadProjects(1);

Issue is I want to be able to define a callBack function after success, and I'd like to include it when I do loadProjects(1, callback:{whatever js is included here gets called back after success})

How can I have a function accept a callback? How can I pass a callback to that function?

Thanks

Everyone thank you. But I want callback to be anything I want. I don't want the callback to be static? — AnApprentice, Apr 27 '11 at 00:16
Thanks again but all these are static callbacks, it doesn't allow me to define things like callbackfunc(22) — AnApprentice, Apr 27 '11 at 00:23

score 24 · Accepted Answer · answered Apr 27 '11 at 00:14

24

function loadProjects(pID, callbackFunction)
{
    $.ajax({
        url: myURL,
        success: function (dataJS)
        {
            if(typeof callbackFunction == 'function')
            {
                callbackFunction.call(this, dataJS);
            }
        }
    });
}

Usage:

loadProjects(pID, function(dataJS)
{
    // do stuff with your dataJS, bear in mind you can call the parameter any name.
});

answered Apr 27 '11 at 00:14

N.B.

13,688
3
45
55

5

+1 for correctly guessing that he wanted to pass parameters to the callback – mVChr Apr 27 '11 at 00:26
This question deserves a -1 for poor wording. – mattsven Apr 27 '11 at 00:33
2

My dad always taught me that the tricky part isn't figuring out the solution, but figuring out the problem. – mVChr Apr 27 '11 at 00:38

score 3 · Answer 2 · answered Apr 27 '11 at 00:14

Here's how you can modify your function so that it can accept a callback.

function loadProjects(pID, callback) {
    $.ajax({
        url: myURL,
        success: function (dataJS) {
          if ($.isFunction(callback)) {
            callback.call();
          }
        }
    });
}

Here's how you would use it.

function myCoolCallback() {
  alert("I am cool");
}  

loadProjects(123, myCoolCallback);

Or you can use it with an anonymous function like so.

loadProjects(123, function() {
  alert("I am cool");
});

score 1 · Answer 3 · answered Apr 27 '11 at 00:14

1

function loadProjects(pID, callback) {

    $.ajax({
        url: myURL,
        success: function (dataJS) { if (callback) { callback(); } }
    });

}

Invoking something like this:

loadProjects(111, function() { alert('hello!'); });

answered Apr 27 '11 at 00:14

mVChr

49,587
11
107
104

but how can I pass params to callback? – AnApprentice Apr 27 '11 at 00:19

score 1 · Answer 4 · answered Apr 27 '11 at 00:23

You can pass a function to another function as if it were any other object. Check this out:

function loadProjects(pId, callback) {

  $.ajax({
    url: myUrl,
    success: function() {
      callback.call(); // <-- invokes your callback with no args
    }

}

You might also read up on the MDC documentation (function.call()).

score -1 · Answer 5 · answered Apr 27 '11 at 00:15

function loadProjects(pID, callback) {
  $.ajax({
    url: myURL,
    success: function (dataJS) {
      // your initial method declaration goes here
      ...

      // just call the callback method at the end of the success method
      callback();
    }

How to write a jQuery function with a callback?

5 Answers5

Linked