Passing Parameters Into Callback

Code snippets to demonstrate ways to pass parameters into callback functions

HTML

<input id="example-1" type="button" class="button" value="Example 1" />
<input id="example-2" type="button" class="button" value="Example 2" />
<input id="example-3" type="button" class="button" value="Example 3" />

CSS

input.button{
  font-size:9pt;
  font-family:droid-serif;
  padding:3px;
  margin-left:5px;
  margin-top:5px;
}

JavaScript

// Objective: pass callbackParams into each of these callback functions

var echoCallbackParams = function(params) {
    alert(params);
};

var echoCallbackEventParams = function(params) {
    alert(params.data);
};

var echoSuccess = function(data, textStatus, jqXHR) {
    console.log("Text status: " + textStatus);
    console.log(data);
    console.log(jqXHR);
};

var fetchData = function(dataAccess, url, params) {
    dataAccess(url, params, echoSuccess);
};

var getJsonData = function(url, params, onSuccess) {
    $.getJSON(url, params, onSuccess);
};

$(document).ready(function() {
    var callbackParams = "add";

    // example 1 - pass in via an anonymous callback
    $("#example-1").click(function() {
        echoCallbackParams(callbackParams);
    });

    // example 2 - pass in via jQuery.click() API 
    $("#example-2").click(callbackParams, echoCallbackEventParams);

    // example 3 - pass in via jquery .ajax onsuccess API
    $("#example-3").click(function() {
        $.getJSON("/echo/jsonp/", callbackParams, echoSuccess);
    });

    // example 4 - pass in via a named function 
    fetchData(getJsonData, "/echo/jsonp/", callbackParams);
});