How to Implement inheritance in Jquery UI widget

Question

I am trying to inherit a method from base widget to another widget. here is my sample code

My base widget is

$(function () {
    $.widget("UI.baseWidget", {
        options: {
            testVal:''
        },
        _create: function () {
            alert(this.option.testVal);
        },

    });
});

and other widget calling this base widget is

$(function () {
    $.widget("UI.MyWidget", $.UI.baseWidget, {
        options: {
          testVal:''
        },
        _create: function () {
            $.UI.baseWidget.prototype._create.call(this);
        }

    });
});

and initilise the MyWidgetcode is'

$('#mydiv').MyWidget({testVal:'test widget'})

How can we pass testVal option from MyWidget to baseWidget call? and I getting error some thing like

Uncaught TypeError: i is not a constructor

Uncaught TypeError: $(...).MyWidget is not a function

can please help me to fix this issue. thanks in advance

Answer 1

Seems to work OK: I only made one correction : changed option to options in alert(this.option.testVal); and the alert with 'test widget' popped up OK. You can also try to create the widget jquery onReady and see if that fixes the problem ie :

$(function () {
    $('#myDiv').MyWidget({testVal:'test widget'});
});

See my code at https://jsfiddle.net/5gmn6x7k/4/