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);

Nickolas

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);

Prohibitive

I already had that, but that doesn't solve the problem of needing to call the original close method as well as my own custom code. This would just be overriding the close method completely. – Nickolas

What the hell are you talking about? This doesn't override the original close function. This hooks into an event that happens when the dialog is closed. jsfiddle.net/H2YQq – Prohibitive

There is also a beforeClose event that you can hook into if you want your code to happen before the dialog closes... – Prohibitive

No but you are only hooking into the close event of a specifically selected dialog. You are not changing the dialog plugin so that all dialogs will have something happen in their normal close method. – Nickolas

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);
  }
}))

Bencion

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

Sateen

I get an error $.ui.dialog.close is undefined when I try to close my dialog. – Nickolas

I don't know. Just thought it was obvious to get it from $.ui.dialog.close. Sorry for my bad answer :( . Hope you will find your help. – Sateen

Ok. In this file: code.jquery.com/ui/jquery-ui-git.js starts line 9817 start the original close method from ui.dialog. hope – Sateen