BadHorsie BadHorsie - 1 year ago 150
Javascript Question

jQuery UI - Override plugin method

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

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?

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



Answer Source

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:

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


To answer the question:

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