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