Passing additional arguments to a callback function in Javascript

I was working on my CMS (Just took a brake to write this), and I tried to figure out how to pass additional arguments to a javascript callback. After some searching I found what I was looking for, I told the people in the jQuery IRC channel and someone gave me shorter and cleaner code that does the same. So let me run you through the code (Note: This is jquery but the same method would also work with normal Javascript) .

In this example I will use an argument that defines where to load the data got from an AJAX request in.

//Custom function that's used instead of the long jQuery Syntax
function loadUrl(url, destination)
{
    // Use a get request to get the page at URL
    $.get(url, function(html, status) { loadedPage(html, status, destination) });
}

// The callback function
function loadedPage(html, status, destination)
{
    // If the AJAX call failed stop the function
    if(status != "success")
        return;

    // Set the html of destination (Which is in this case a jQuery Selector) to the jquery repsonse
    $(destination).html(html);
}

If you haven’t figured out how to pass the additional arguments from the above example I’ll explain in detail, Let’s take a closer look at line 5(Formatted for readability).

$.get(url,
    function(html, status)
    {
        loadedPage(html, status, destination)
    }
);

As you can see we are using a custom defined function for the callback, What we do is make a function that has the arguments that get passed to the callback.

function(html, status)
{

}

And in that function we call our real callback function but with the additional arguments we passed to loadUrl()

function(html, status)
{
    loadedPage(html, status, destination)
}

And that’s it, this can be done with as many additional parameters as you like just add them to the call of the real callback function.

Leave a comment if you have any questions or feedback.

Regards, Xeross

Comments

http://google.com neopmewAgmetA

Hi People
How are you doing?
http://beingzoe.com/ zoe somebody

Thank you. I feel like an idiot that it took your post on callbacks in jquery/javascipt to figure out how I was going to pass arguments to a callback in WordPress/php. So simple. So obvious. Sublime.
- Xeross
  
  I even checked this post myself a while ago because I forgot how I did it xD
http://gpslogapp.com/ William Denniss

Thanks. This was a simpler solution that any of the suggestions I found on stackoverflow.
Guest

I have to say, I have searched up and down to finally stumble upon your post. It was a life saver though I had to extend the function calls to one more level in order to get the parameters to pass correctly. Thank you very much.
- http://theelitist.net/ Xeross
  
  Always good to hear someone when someone finds one of my posts useful ^^
Mike Plichta

There seems to be one limitation with this. I’m using a function that requires a callback function in a loop. In your example, if destination was a variable that updates with every iteration of the loop, It will almost always use the final loop number by the time the callback function is called. In other words, the value for destination isn’t assigned until the request comes back, making that variable out of date.
Mike Plichta

I fixed the problem by making a separate function that just holds the loop. That way, I can call the real function and pass it the static parameter of whatever the current loop iteration is.
Nahuel

Awesome. Thank you very much. This is exactly what i was looking.

Passing additional arguments to a callback function in Javascript

Subscribe

Ads

Recent Comments

@Xeross

License