Calling method of extended jquery widget

Question

I have a jquery widget like this:

$.widget("ui.MyWidget", {
              options: {            
            Value1: 10,
            Value1: 20,
        },
// and other methods like _create,...
});

And, i am extending it like this:

$.widget("ui.MyExtWidget", $.extend({
            options: {
            Value3: 20,
        }}, $.ui.MyWidget.prototype, {
        myNewMethod: function(){
            alert(this.options.Value1+this.options.Value3);
        }
}

I have to call the "myNewMethod" in my html.

My html code is like this:

$("#Div1").MyExtWidget();
$("#Div1").MyExtWidget("myNewMethod");

I am getting exception like this while using the above code cannot call methods on TimeSpanHeader prior to initialization; attempted to call method 'myNewMethod'

What is the way to call the "myNewMethod" method?

Answer 1

The widget factory provides a way to extend from an existing widget with $.widget constructor:

$.widget("ui.MyExtWidget", $.ui.MyWidget, {
    options: {
        alertText: ''
    },
    myNewMethod: function() {
        alert('Value1 = ' + this.options.Value1);
        alert('alertText = ' + this.options.alertText);
    }
});

Note: The constructor will take care of extending the options as well. This is the method used in the jQuery UI library itself. For instance, the widget ui.mouse has options and a lot of the other widgets inherits from it and have their own extra options along with the ones from ui.mouse.

DEMO

---

From the Widget Factory wiki post:

The widget factory is a simple function on the global jQuery object - jQuery.widget - that accepts 2 or 3 arguments.

jQuery.widget("namespace.widgetname", /* optional - an existing widget prototype to inherit from /, / An object literal to become the widget's prototype*/ {...} );

The second (optional) argument is a widget prototype to inherit from. For instance, jQuery UI has a "mouse" plugin on which the rest of the interaction plugins are based. In order to achieve this, draggable, droppable, etc. all inherit from the mouse plugin like so: jQuery.widget( "ui.draggable", $.ui.mouse, {...} ); If you do not supply this argument, the widget will inherit directly from the "base widget," jQuery.Widget (note the difference between lowercase "w" jQuery.widget and uppercase "W" jQuery.Widget).