JQuery UI - plugin override method

Question

I am having problems accessing OOP in the jQuery user interface regarding the classic OOP I am used to.

As far as I can tell, I created a new plugin (widget) called "modal", which extends the widget of the interface dialog box. Now, how can I override the close() dialog 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 do you want to override $ .ui.dialog with the new close function when it has a closed event that you can connect to? Click on the events tab at the following link:

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

Code examples from the page:

Set a callback function to handle the closing event as an init parameter.

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

Bind to a 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

I am not sure about jQuery user interface. I don’t really 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

Answer 3

Here is an example that I found. I find this understandable 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); } }))