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
– AnApprentice, Commented Apr 27, 2011 at 0:16
Thanks again but all these are static callbacks, it doesn't allow me to define things like callbackfunc(22) — AnApprentice
– AnApprentice, Commented Apr 27, 2011 at 0:23

N.B. · Accepted Answer · 2011-04-27 00:14:56Z

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, 2011 at 0:14

N.B.

14.1k3 gold badges47 silver badges56 bronze badges

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

3 Comments

mVChr Over a year ago

+1 for correctly guessing that he wanted to pass parameters to the callback

mattsven Over a year ago

This question deserves a -1 for poor wording.

mVChr Over a year ago

My dad always taught me that the tricky part isn't figuring out the solution, but figuring out the problem.

jessegavin · Accepted Answer · 2011-04-27 00:14:44Z

3

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");
});

answered Apr 27, 2011 at 0:14

jessegavin

75.8k28 gold badges141 silver badges165 bronze badges

Comments

mVChr · Accepted Answer · 2011-04-27 00:14:54Z

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, 2011 at 0:14

mVChr

50.3k11 gold badges111 silver badges105 bronze badges

1 Comment

AnApprentice Over a year ago

but how can I pass params to callback?

ninjascript · Accepted Answer · 2011-04-27 00:23:08Z

1

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()).

answered Apr 27, 2011 at 0:23

ninjascript

1,7611 gold badge10 silver badges8 bronze badges

Comments

matt · Accepted Answer · 2011-04-27 00:15:07Z

-1

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();
    }

answered Apr 27, 2011 at 0:15

matt

9,4923 gold badges46 silver badges47 bronze badges

Collectives™ on Stack Overflow

How to write a jQuery function with a callback?

5 Answers 5

3 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related