Passing a callback function with included parameters?

Question

I have this below code..

function getGrades(grading_company) {

    if (grading_company == 'Not Specified') {

        // Remove grades box & show condition box
        showConditionBox();

    } else {

        // Set file to get results from..
        var loadUrl = "ajax_files/get_grades.php";

        // Set data string
        var dataString = 'gc_id=' + grading_company;

        // Set the callback function to run on success
        var callback = showGradesBox;

        // Run the AJAX request
        runAjax(loadUrl, dataString, callback);  

    }

}

function runAjax(loadUrl, dataString, callback) {

    jQuery.ajax({
        type: 'GET',
        url: loadUrl,
        data: dataString,
        dataType: 'html',
        error: ajaxError,
        success: function(response) {
            callback(response);
        }
    });    

}

Edit: Here is the function that gets called as the callback function:

function showGradesBox(response) {

    // Load data into grade field
    jQuery('#grade').html(response);

    // Hide condition fields
    jQuery('#condition').hide();
    jQuery('#condition_text').hide();

    // Show grade fields
    jQuery('#grade_wrapper').show();
    jQuery('#grade_text_wrapper').show();    

}

Now if I wanted to pass the grading_company variable to the callback function as a parameter is there a way to do that without having to add it as another parameter in the runAjax call? I'm trying to keep the runAjax function open to other usage so I don't want to pass in any extra parameters; but if it can somehow be included within the callback then great.

in the success-function don't forget to check, if callback is a function: if (typeof callback == 'function') { callback(response); }, because, maybe your callback function isn't set... normally a callback-function is optional — algorhythm, Jan 07 '13 at 16:34

jbabey · Accepted Answer · 2013-01-07T17:46:41.487

46

change your callback to an anonymous function:

// Set the callback function to run on success
var callback = function () {
    showGradesBox(grading_company);
};

This allows you to pass parameters to the inner function.

Edit: to allow for the ajax response:

// Set the callback function to run on success
var callback = function (response) {
    showGradesBox(grading_company, response);
};

edited Jan 07 '13 at 17:46

answered Jan 07 '13 at 16:33

jbabey

45,965
12
71
94

+1 - Binding is an alternative (if the arguments to `showGradesBox` are in the right order). – Ted Hopp Jan 07 '13 at 16:34
So where would I add that code? Outside of all other functions? No need to pass in the `showGradesBox` as the callback function then or...? Not 100% how I would use it. – Brett Jan 07 '13 at 16:41
@Brett the code would replace your current declaration of `var callback = showGradesBox;` in the `getGrades` function. – jbabey Jan 07 '13 at 16:48
@jbabey Oh ok, makes sense. Though does the `showGradesBox` still get the `response` parameter sent to it from when it's called via `runAjax` & in what order are these two parameters received? – Brett Jan 07 '13 at 16:55
@jbabey Well I tried it out exactly like this and just seems to pass the `grading_company` to the function, now not sure how to get the ajax response passed to it as well? – Brett Jan 07 '13 at 17:39
@jbabey Awesome - thanks! So I don't need to make any changes to when I call it inside the `runAjax` function? – Brett Jan 07 '13 at 17:49
@Brett no changes to the ajax success, you're already passing the response to the anonymous callback. – jbabey Jan 07 '13 at 17:52
@TedHopp Can you make an example answer with the way to do it via binding? – Honinbo Shusaku Dec 12 '16 at 14:27
@Abdul - You'd define `showGradesBox` as `function showGradesBox(extra_info, response)` and then as a call-back use `showGradesBox.bind(grading_company)`. When the call-back gets invoked with the response, `showGradesBox` will be called with two arguments, `grading_company` and the Ajax response. – Ted Hopp Dec 12 '16 at 16:15

score 2 · Answer 2 · edited May 23 '17 at 12:33

Another possibility is instead of doing dataString do dataObject then pass that object to the callback. Like so:

function getGrades(grading_company) {

    if (grading_company == 'Not Specified') {

        // Remove grades box & show condition box
        showConditionBox();

    } else {

        // Set file to get results from..
        var loadUrl = "ajax_files/get_grades.php";

        // Set data object
        var dataObject = {
            'gc_id' : grading_company
            /*to do multiples..
            'item1' : value1, 
            'item2' : value2, 
            'etc' : etc */
        }

        // Set the callback function to run on success
        var callback = showGradesBox;

        // Run the AJAX request
        runAjax(loadUrl, dataObject, callback);  

    }

}

function runAjax(loadUrl, dataObject, callback) {

    jQuery.ajax({
        type: 'GET',
        url: loadUrl,
        data: $.param(dataObject),
        dataType: 'html',
        error: ajaxError,
        success: function(response) {
            callback(response, dataObject);
        }
    });    

}

Note the addition of $.param().

Then in the callback function, you should know what data you're after. If function setGrades(resp, data) { ... } was the callback, then you can access the values in setGrades

function setGrades(resp, data) {
   alert( data.gc_id);
}

EDIT

After testing, I realize that $(dataObject).serialize() will not work. So I've updated to use $.param(). Please see this SO post for more info.

I've updated the answer to use `$.param()`. `serialize()` will not work in the context I was using it for. — jwatts1980, Jan 07 '13 at 16:55

Passing a callback function with included parameters?

2 Answers2

Linked