jquery plugin extend defaults problem

Question

Hi everyone

this is my first post so I hope I am posting to the right place.

I am trying to develop a dialog/modal plugin. this is my first plugin and I'm not sure if I have produced it in the correct way. The problem I am having is that the $.extend is not updating the settings object. I've got 2 elements using the plugin. the #dialog element is not extending the plugins settings object. I've been trying for a couple of days to learn how plugins work and its killing me from the inside :)

$("#icon_menu").Dialog();
$("#dialog").Dialog({closeable:false,clear_on_close : true});

Any help you can give me would be greatly appreciated

here is the code

(function( $ ){

$.fn.Dialog = function( method ) {           

    var elem = this;

    var settings = {
      'mask'         : '#mask',
      'closeable'    : true,
      'clear_on_close' : false
    };

  var methods = {
    init : function( options ) { 

                if ( options ) { 
                    $.extend( settings, options );
                }

                console.log(settings);

            }, 
    open : function( options ) { 

            var window_width = $(window).width();
            var window_height = $(window).height();

            var modal_height = "";
            var modal_width = "";

            var top = "";
            var left = "";

            if(!settings.set_width)
            {
                modal_width = elem.outerWidth();
            }else{
                modal_width = settings.set_width;
            }

            if(!settings.set_height)
            {
                modal_height = elem.outerHeight(); 
            }else{
                modal_height = settings.set_height;
            }

            if(!settings.set_y_pos)
            {
                top = (window_height-modal_height)/2;
            }else{
                top = settings.set_y_pos;
            }

            if(!settings.set_x_pos)
            {
                left = (window_width-modal_width)/2; 
            }else{
                left = settings.set_x_pos;
            }

            elem.addClass('active').css({'top': top + 'px', 'left': left + 'px'});

            $(settings.mask).css({ 'display' : 'block', opacity : 0}).fadeTo(500,0.8);

            elem.css({ 'display' : 'block', opacity : 0}).fadeTo(500,1);

                if(settings.closeable){$(settings.mask).bind('click.Dialog',  methods.close );}

                $(window).bind('scroll.Dialog', methods.reposition);            

    },
    open_ajax : function(options)
    {

        $.get(options.page, function(data){ 
            elem.html(data);
             methods.open();
        });//$.get("sign_in.html",

    },
    close : function( options ) { 

                $(settings.mask).fadeOut(500);

                elem.fadeOut(500);

                //alert(settings.clear_on_close)

                console.log(settings.clear_on_close)

                if(settings.clear_on_close)
                {

                    elem.html("");

                }

                $(window).unbind('scroll.Dialog');
                $(settings.mask).unbind('click.Dialog');


    },
    reposition : function( options )
    {



            $(settings.mask).css({"marginTop": ($(window).scrollTop()) + "px"});
            elem.stop().animate({"marginTop": ($(window).scrollTop()) + "px"},1000);


    }

  };


    if ( methods[method] ) {
      return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
      return methods.init.apply( this, arguments );
    } else {
      $.error( 'Method ' +  method + ' does not exist on jQuery.tooltip' );
    }    

  };

})( jQuery );

Answer 1

This is the pattern I generally use. Note that I apply the defaults directly after they are defined in my plugin code. I'm not 100% my pattern is correct either. But it does work.

(function($) {
$.fn.extend({

    dropList: function(options) {

        var defaults = {
            url: '',
            sortable: false,
            hoverClass: 'ui-state-highlight',
            rowSelected: function() {
            },
            rowDblClicked: function() {
            },
            onDrop:  function(ui) {
            }
        };

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

        return this.each(function() {
            //this is where I act on the selected element
        }
    }
}); })(jQuery)

Answer 2

The problem is that your plugin has an internal state. Everytime you call the dialog method on an object, a new state created -- the old state is never referenced or saved.

Read the data section in this tutorial for more ideas on how to store the state across function calls: http://docs.jquery.com/Plugins/Authoring#Data