Question

I’m using a jquery plugin that is supposed to accept options, but isn’t for some reason. (Perhaps it was never finished?)

The code is already set up to accept options, but it seems that the option object is simply not being passed through.

Here is the plugin constructor:

$.fn.extend({ // extend jQuery.fn object
    pluginName: $.pluginName.construct
});

Which calls:

     $.extend({
    pluginName: new function(options) {
        var defaults = {bla: 1};
        var options = $.extend(defaults, options);
                ....

        this.construct = function() {
                    return this.each(function() {
                    .....
                 }
            }
     });

So, I made the following changes to the first bit of code:

$.fn.extend({ // extend jQuery.fn object
    pluginName: function(options) {
        return $.pluginName.construct(options);
    }
});

Thinking it would be that easy. (I have never created a jquery plugin). However, it now gives me an error:

 TypeError: 'undefined' is not a function (evaluating 'this.each')

I’m sure it’s not correct since the .construct method does not take the options, but the “new function(options)” method does, and secondly, I probably need to pass $this somehow as well.

Can anyone give me a hint on how to fix this?

It should be callable like so:

$('#id').pluginName({first: true, blabla: "yes"});

EDIT: My current changes to the plugin are available here: http://jsfiddle.net/fbF8w/ – if anyone wants to take a closer look.

Edit: got it working. Nevermind guys. Thanks.

Thanks,
Wesley

Answer 1

I don’t know what tutorial you are using but I’m not sure in this part:

this.construct = function() {
                return this.each(function() {
                .....
             }
        }

Try to do like described here (I’ve implemented a lot of plugins in such way): http://www.queness.com/post/112/a-really-simple-jquery-plugin-tutorial

(function($){

    $.fn.extend({ 

        //pass the options variable to the function
        pluginname: function(options) {


            //Set the default values, use comma to separate the settings, example:
            var defaults = {
                padding: 20,
                mouseOverColor : '#000000',
                mouseOutColor : '#ffffff'
            }

            var options =  $.extend(defaults, options);

            return this.each(function() {
                var o = options;

                //code to be inserted here
                //you can access the value like this
                alert(o.padding);

            });
        }
    });

})(jQuery);