Extending widgets in Jquery UI with redefining parent methods

Question

I try to extend UI dialog according to documentation (UI version 1.8.16):

(function($) {
    $.widget('ui.mydialog', $.extend(true, $.ui.dialog.prototype, {
        _create: function() {
            return $.Widget.prototype._create.apply(this, arguments);
        }
    }));
})(jQuery);

$(function() {
    $('div#dialog').mydialog();
});

Executing of this code causes JS error: "this.uiDialog is undefined".

And if try to override the _init() method there are no errors, but parent method call takes no effect.

I'm confused.. Which way is legal to extending for e.g. put some custom initialize code?

score 6 · Accepted Answer · edited May 23 '17 at 11:53

6

I think this post would solve your question: Inherit from jQuery UI dialog and call overridden method.

In short, if you want to build a widget inheriting jQuery UI Dialog, you can do this:

(function($) {
    $.widget("ui.mydialog", $.ui.dialog, {
        _create: function() {
            $.ui.dialog.prototype._create.call(this);
        }
    });

})(jQuery);

See this in action: http://jsfiddle.net/william/RELxP/.

This tutorial will enlighten you: http://wiki.jqueryui.com/w/page/12138135/Widget%20factory. In short, $.Widget is the base widget object. Even though it has a _create function, it by default does nothing, leaving the initialisation code to the subclass. Take a look at this updated example: http://jsfiddle.net/william/RELxP/1.

edited May 23 '17 at 11:53

Community

1
1

answered Sep 17 '11 at 23:42

William Niu

15,798
7
53
93

Thanks. It's really help. But i'm wondering why doesn't work extending approach from official documentation: – Darkside Sep 19 '11 at 17:42
which part of the official doco are you talking about? The word "extend" doesn't come up once in the jQuery UI Developer Guide. – William Niu Sep 19 '11 at 22:53
This one: http://jqueryui.com/docs/Developer_Guide Yes, "extend" - is my innovation;) But I mentioned about this approach: $.Widget.prototype... – Darkside Sep 20 '11 at 14:56
i'm got confused with jqueryui doc. you help me to figure it out. thanks a lot, man! – Darkside Sep 21 '11 at 08:31
1

Is this still the recommended way? Or would it be better to do `this._super(this.options)`? – Marie Jan 12 '17 at 17:46
Works, but it's obsolete and too verbose now – Code Slicer Jun 28 '21 at 14:46

Odys · Answer 2 · 2014-06-06T14:57:38.497

5

From jQuery 1.9 and on, if you want to add functionality to a widget and don't want to replace the existing function, after you do your code call the parent method. To do this, instead of what William Niu suggests, you can simply do this:

_create: function()
{
    // Custom code here

    // Call the _create method of the widget
    this._super();
}

This applies to all existing methods. (eg _setOption, _trigger etc)

edited Jun 06 '14 at 14:57

answered Jun 06 '14 at 11:59

Odys

8,951
10
69
111

1

Yes, this._super() will call the method in the parent with the same name: https://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/ . Good answer – contrid Oct 24 '16 at 14:45
This saved my life. This is what the doc says about extending the existing `open` method: `Since dialogs automatically open by default, "open" will be logged when this code runs`, but they don't call `this._super()` which results in the same error as OP was experiencing. – DerpyNerd Sep 03 '19 at 12:49

score 1 · Answer 3 · answered Aug 17 '12 at 15:40

1

I posted a simple example of extending a jQueryUI Dialog using the Widget factory.

http://jsfiddle.net/Artistan/jWUGZ/

This example extends a dialog to create a simple loading modal.

answered Aug 17 '12 at 15:40

CharPete

11
1

A little late, don't you think? – Kpower Aug 17 '12 at 15:43
3

Yep, a little late for OP but not for the community ;) – Odys Jun 06 '14 at 12:02

Extending widgets in Jquery UI with redefining parent methods

3 Answers3

Linked