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

gislikonrad · Accepted Answer · 2011-09-01 11:30:27Z

8

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

edited Sep 1, 2011 at 11:30

answered Aug 31, 2011 at 13:10

gislikonrad

3,5912 gold badges24 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

BadHorsie Over a year ago

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.

gislikonrad Over a year ago

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

gislikonrad Over a year ago

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

BadHorsie Over a year ago

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.

Ognyan Dimitrov · Accepted Answer · 2016-05-11 11:04:40Z

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

edited May 11, 2016 at 11:04

answered May 11, 2016 at 8:30

Ognyan Dimitrov

6,2932 gold badges54 silver badges75 bronze badges

Comments

Andreas Louv · Accepted Answer · 2011-08-31 12:56:31Z

0

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

answered Aug 31, 2011 at 12:56

Andreas Louv

47.3k14 gold badges109 silver badges126 bronze badges

3 Comments

BadHorsie Over a year ago

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

Andreas Louv Over a year ago

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.

Andreas Louv Over a year ago

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

Collectives™ on Stack Overflow

jQuery UI - Override plugin method

3 Answers 3

4 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related