Passing a callback function with included parameters? [duplicate]

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.

Answer 1

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

Answer 2

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.