jQuery - pass array of functions to ajax success callback

Question

I'm fairly new with jQuery, and I'm trying to call two functions on successful ajax (since the documentation says as of 1.5 success callback can take an array of functions).

If I do this, everything works fine:

$.ajax({
    url : sJSONFilePath,
    dataType : 'json',
    success : foo(data)
});

What do I need to do to pass in an array of functions? If I try the following, I get a "Uncaught TypeError: Cannot read property 'length' of undefined" error in the console:

$.ajax({
    url : sJSONFilePath,
    dataType : 'json',
    success : [foo(data), bar(data)]
});

I was unable to find any examples of this feature being used. Thanks in advance, and sorry if this is dumb.

Unless foo returns a function, then this success : foo(data) doesn't work as well as you may think. You're invoking foo immediately instead of passing it as a callback. — user1106925
– user1106925, Commented Feb 2, 2012 at 22:38

Alnitak · Accepted Answer · 2012-02-02 23:11:22Z

13

There's no need for an array, you can use the deferred syntax that was also introduced in jQuery 1.5:

$.ajax(...).done(foo).done(bar);

This is generally cleaner and much more extensible than passing callback functions as parameters to $.ajax and relatives.

From the $.ajax() documentation:

The jqXHR objects returned by $.ajax() as of jQuery 1.5 implement the Promise interface, giving them all the properties, methods, and behavior of a Promise (see Deferred object for more information). For convenience and consistency with the callback names used by $.ajax(), jqXHR also provides .error(), .success(), and .complete() methods. These methods take a function argument that is called when the $.ajax() request terminates, and the function receives the same arguments as the correspondingly-named $.ajax() callback. This allows you to assign multiple callbacks on a single request, and even to assign callbacks after the request may have completed. (If the request is already complete, the callback is fired immediately.)

[but see the paragraph after, where it explains how .success, .error and .complete are now deprecated and replaced with .done, .fail and .always]

edited Feb 2, 2012 at 23:11

answered Feb 2, 2012 at 22:37

Alnitak

341k72 gold badges420 silver badges503 bronze badges

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

5 Comments

MJS Over a year ago

This works. Does $.done pass (data, textStatus, jqXHR) to foo and bar just like success does? I don't know much about Deferred

Alnitak Over a year ago

@MJS yes, it does - I'll add some text.

Kevin Dice Over a year ago

Just a note for anyone happening upon this: The documentation appears to suggest that the callbacks are executed in serial.

Alnitak Over a year ago

@KevinDice of course - they can't possibly be executed in parallel

Kevin Dice Over a year ago

I mean synchronously rather than async.

T.J. Crowder · Accepted Answer · 2012-02-02 22:34:02Z

5

What you do is this:

$.ajax({
    url : sJSONFilePath,
    dataType : 'json',
    success : function(data) {
        foo(data);
        bar(data);
    }
});

or this:

$.ajax({
    url : sJSONFilePath,
    dataType : 'json',
    success : [foo, bar]
});

Note that in the second one, I'm not calling foo and bar, I'm listing the function references in an array (since as you say, as of 1.5 jQuery's ajax callback options allow that).

You've said that this works fine:

$.ajax({
    url : sJSONFilePath,
    dataType : 'json',
    success : foo(data)
});

but it doesn't. What that does is immediately call the foo function, and then assign the return value of that function to the success property of the options you're passing to ajax. Unless you're using foo to build and return a function to use as the callback, that's not what you want to do.

It's important to understand the difference between calling a function and using a reference to it. If you have parens after the function name (with or without arguments in them), you're calling it. If you just have the name, you're referring to it. E.g.:

var f = foo(); // CALLs `foo` and assigns return value to `f`
var f = foo;   // Assigns a reference to `foo` to `f`

answered Feb 2, 2012 at 22:34

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

6 Comments

MJS Over a year ago

This is perfect. I think my JS was cached, and that's why it worked with my borked code. I'll mark this as answer after 15 mins. Thanks for the thorough reply!

Alnitak Over a year ago

@amnotiam except for completely missing out usage of deferred object syntax, which is now the preferred way to do AJAX callbacks...

user1106925 Over a year ago

@Alnitak: Fair point, though I'd consider deferreds to be alternate instead of preferred

Alnitak Over a year ago

@amnotiam well, I prefer it - I've used both and I'd never to back to the old way now ;-)

MJS Over a year ago

While this post was very informative and answered my question exactly (much, much appreciation), I ended up using the .done() solution above. Thank you very much for your time and help.

|

Jerome WAGNER · Accepted Answer · 2012-02-02 22:43:09Z

1

when writing

success : [foo(data), bar(data)]

you are in fact evaluating the foo and bar functions (probably with a null argument)

you need to write

success : [foo, bar]

answered Feb 2, 2012 at 22:43

Jerome WAGNER

22.6k10 gold badges64 silver badges79 bronze badges

Comments

Wes Crow · Accepted Answer · 2012-02-02 22:35:17Z

0

Why don't you call one function that calls the other two:

$.ajax({
    url : sJSONFilePath,
    dataType : 'json',
    success : foo_bar(data)
});

function foo_bar(data)
{
   foo(data);
   bar(data);
{

answered Feb 2, 2012 at 22:35

Wes Crow

2,96722 silver badges24 bronze badges

Collectives™ on Stack Overflow

jQuery - pass array of functions to ajax success callback

4 Answers 4

5 Comments

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related