How to implement inheritance in jQuery UI widgets

Question

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

My base widget

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

and another widget that calls this base widget,

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

and initialize MyWidgetcode:

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

How can we pass the testVal parameter from MyWidget to call baseWidget? and I get an error, something like

Uncaught TypeError: I am not a constructor

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

can help me solve this problem. thank you in advance

Answer 1

It seems to work fine: I made only one correction: changed the option to the parameters in alert(this.option.testVal); , and a warning appeared with a "test widget." You can also try creating a jquery onReady widget and see if this fixes the problem ie:

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

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