JQuery ui widget inheritance

Question

I need to customize jquery ui widget. I wanted to change only the "create" method. I wrote a new widget inherited from ui.automplete widget. This works fine. But how do I add new events like select, click, change? Isn't it possible to add events on widget inheritance?

$.widget("ui.my_autocomplete", $.ui.autocomplete, {

    _create: function() {
        //Here is my customized code
    },
    select: function( event, ui ) { // Not working!
        console.log("-- test my_autocomplete select: " );
        ui.item.option.selected = true;
        .....
    }, 
    change: function( event, ui ) { // Not working!
        console.log("-- test my_autocomplete change: " );
        .....
    }
});

ui.automplete methods of JQuery ui 1.8:

$.widget( "ui.autocomplete", {
    options: {
        minLength: 1,
        delay: 300
    },
    _create: function() {
        ...
    },
    destroy: function() {
        ...
    },
    _setOption: function( key ) {
        ...
    },
    _initSource: function() {
        ...
    },
    search: function( value, event ) {
        ...
    },
    _search: function( value ) {
        ...
    },
    _response: function( content ) {
        ...
    },
    close: function( event ) {
        ...
    },
    _normalize: function( items ) {
        ...
    },
    _suggest: function( items ) {
        ...
    },
    _renderMenu: function( ul, items ) {
        ...
    },
    _renderItem: function( ul, item) {
        ...
    },
    _move: function( direction, event ) {
        ...
    },
    widget: function() {
        ...
    }
});

I tried to implement the inheritance in widget but some error like Uncaught TypeError: i is not a constructor is coming . can you please look at this question stackoverflow.com/questions/39009882/… — Arun
– Arun, Commented Aug 18, 2016 at 5:15

jyore · Accepted Answer · 2011-09-03 13:40:38Z

4

Yes this is possible, but you if you want events, i think that you are doing it wrong...currently, you are adding them as methods as to be called like:

$('.selector').widget('select');

If you want regular events, you can attach them to the element directly. So in your _create method do:

_create : function() {

   //Bind normal events
   this.element.click(function() {...});
   this.element.select(function() {...});

   //Howto fire a custom event
   this._trigger('myEvent', event, data);
});

If you want to supply callbacks to the custom event example, you can do that through supplying it to the init options, or you can bind to it:

$('.selector').bind('myWidgetmyEvent',function(event,ui) {...});

answered Sep 3, 2011 at 13:40

jyore

4,8452 gold badges23 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JQuery ui widget inheritance

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related