jQuery UI - Override plugin method

Question

I am having trouble getting to grips with OOP in jQuery UI, with regards to classic OOP that I'm used to.

As far as I can tell, I have created a new plugin (widget) called 'modal' that extends the UI dialog widget. Now how do I override dialog's close() method, but also call the original method so that I don't lose its functionality?

$.widget('ui.modal', $.ui.dialog, {

    close: function() {

        // How do I do something to the current modal DOM object?
        // Is this correct?
        $(this).addClass('test');

        // Then call the parent close() method to keep all original
        // functionality of dialog.close()
        // ???

    }
});

$.extend($.ui.modal);

Answer 1

Why would you want to override $.ui.dialog with a new close function when it has a close event that you can hook into? Check out the events tab in the following link:

http://jqueryui.com/demos/dialog/#modal

Code examples from the page:

Supply a callback function to handle the close event as an init option.

$( ".selector" ).dialog({
   close: function(event, ui) { ... }
});

Bind to the close event by type: dialogclose.

$( ".selector" ).bind( "dialogclose", function(event, ui) {
  ...
});

EDIT

To answer the question:

(function($){
    var dialogExtensions ={
        oldClose: $.ui.dialog.prototype.close,
        close: function(event){
            this.oldClose(event);
            // custom code
        } 
    };
    $.extend($.ui.dialog.prototype, dialogExtensions);
})(jQuery);

Answer 2

Here is an example I found. I find it clear and useful :

// If you dont need to call original method
$.widget("ui.addresspicker", $.extend({}, $.ui.addresspicker.prototype, {
  _updatePosition: function(){
    // Do what you want to
  }
}));

// If you need to call original method
var orig_updatePosition = $.ui.addresspicker.prototype._updatePosition;
$.widget("ui.addresspicker", $.extend({}, $.ui.addresspicker.prototype, {
  _updatePosition: function(){
    // Do what you want to
    // Call original widget method  
    orig_updatePosition.apply(this, arguments);
  }
}))

Answer 3

Im not sure about jQuery UI. Really don't like it .

But think you can do something like this.

$.widget('ui.modal', $.ui.dialog, {

    close: function() {

        $(this).addClass('test');

        $.ui.dialog.close.call(this, arguments);
        // Using method call to call the original close method from dialog
        // The sweet thing about call is you can pass this to it.
        // Sending any arguments you maybe get from the function initialize. close('argument 1', 'argument 2', etc...) 

    }
});

$.extend($.ui.modal);

Andreas