Passing callback function to a jQuery plugin

Question

I am creating a jQuery plugin that accepts input options, as described in this link . The following is the same code from the above link

(function ( $ ) {
    $.fn.greenify = function( options ) {
        // This is the easiest way to have default options.
        var settings = $.extend({
            // These are the defaults.
            color: "#556b2f",
            backgroundColor: "white"
        }, options );

        // Greenify the collection based on the settings variable.
        return this.css({
            color: settings.color,
            backgroundColor: settings.backgroundColor
        });
    };
}( jQuery ));

I am also extending the plugin a little bit, so that it will trigger a user function if the user passes a callback function. So, the plugin evolved to the following:

(function ( $ ) {
    $.fn.greenify = function( options ) {
        // This is the easiest way to have default options.
        var settings = $.extend({
            // These are the defaults.
            color: "#556b2f",
            backgroundColor: "white",

            onGreenify: function () {} // This is a new option
        }, options );

        // Greenify the collection based on the settings variable.
        var newCss = this.css({
            color: settings.color,
            backgroundColor: settings.backgroundColor
        });

        // Execute the function
        if (typeof settings.onGreenify == "function") {
            settings.onGreenify ();
        }

        return newCss;
    };
}( jQuery ));

And when the user does this:

var greenifyOptions = {
    onGreenify: function () {
        console.log("Element is now green.");
    }
}

$("#id1").greenify(greenifyOptions);

then the above bit of code will run successfully and display the message Element is now green. to the console.

So far so good.

Now, here is the problem I am facing. How can I pass input param(s) to the onGreenify function? For example, I would like to do the following:

var name = "John";
var greenifyOptions = {
    onGreenify: function (name) {
        console.log ("Hello " + name +  ". Element is now green.");
    }
}

$("#id1").greenify(greenifyOptions);

which should eventually display Hello John. Element is now green. to the console.

But I am not sure how to modify the following code to allow it to accept input param(s)

if (typeof settings.onGreenify == "function") {
    settings.onGreenify ();
}

Please note, this function should accept any number of input parameters. I do not have control over what the user needs to pass.

Is my approach right? What is the piece of code that needs to be modified?

Thanks.

Answer 1

hi here is a simple demo , but there is something bad in your idea, if the name is globale, no need to be passed get directly.. I'm thinking how could be done wit passing a name by element, being something scoped by de pluging :

     (function ( $ ) {

    $.fn.greenify = function( options ) {

        // This is the easiest way to have default options.
        var settings = $.extend({
            // These are the defaults.
            color: "#556b2f",
            backgroundColor: "white",

            onGreenify: function () {} // This is a new option

        }, options );

        // Greenify the collection based on the settings variable.
        var newCss = this.css({
            color: settings.color,
            backgroundColor: settings.backgroundColor
        });

        // Execute the function
        if (typeof settings.onGreenify == "function") {

            //settings.onGreenify ();
            settings.onGreenify.call(this, settings.name);
        }

        return newCss;

    };

}( jQuery ));
var name = 'juan'
var greenifyOptions = {
        name: 'juaanddd',
    onGreenify: function (name) {
        console.log("Element is "+name+" now green.");
    }
}

$("#id1").greenify(greenifyOptions);