Question

I’m working on a jQuery plugin and can’t seem to override the default settings, here’s a snippet of the plugin.

        $.Auction  = {

        defaults: {
            parentId: '#span',
            bidButtonClassName: '.live_bid'
        }
    };


    $.setAuction = function(options){

        startAuction();

    }

    function startAuction(){

            var options = $.extend({}, $.Auction.defaults, options);
            alert(options.parentId);

    }



    $.setAuction({parentId: '#div'});

Basically I’m trying to override the parentId value at the bottom, but it always alerts the value #span. Any ideas what I’m doing wrong? Thanks!

Answer 1

You’re passing {parentId: '#div'} as an argument to $.setAction, but you’re not actually using it. You want to do something like this:

$.setAuction = function(options){
    startAction(options);
}

function startAction(options){
        options = $.extend({}, $.Auction.defaults, options);
        alert(options.parentId);
}

Edit: @TmEllis suggests a better way of implementing this functionality, but it can be made better still by making the defaults themselves customizable:

(function($)
{
    $.fn.setAuction = function(options)
    {   
        options = $.extend({}, $.fn.setAuction.defaults, options);
        return this.each(function()
        {
            alert($(this).id);
        });
    };

    $.fn.setAuction.defaults =
    {
        bidButtonClassName: '.live_bid' 
    };
})(jQuery);

See this article for a more complete discussion of how to write good jQuery plugins.