Howto access data held in widget options when inside a widget event handler

Question

I have data held in the options variable, but in an event (OnChange) of a select list this refers to the DOMElement and therefore this.options refers to the list of objects.

everywhere else I can have

var o = this.options;

but this is no use in this context.

How to get/set the widget information ?

Answer 1

Use the this._on() method to bind the handler. This method is provided by the jQuery UI widget factory and will make sure that within the handler function, this always refers to the widget instance.

_create: function () {
    ...
    this._on(this.selectElement, {
        change: "_onChange" // Note: function name must be passed as a string!
    });
},
_onChange: function (event) {
    // 'this' is now the widget instance.
},

Answer 2

You can also simply do this in the event handler (e.g. for the autocomplete widget)

select: function(event, ui) {
   var options = jQuery(event.target).data("autocomplete").options;

   ...
}

Answer 3

(function($){
    $.widget(
        "ui.my_ui_widget", 
        {
            //------------------------------------------------------------------
            _init : function(){
                var o = this.options; // 2
                o.context = this;
                ...
                // 3
                $('#'+o.id).bind('change', {context:this}, this.on_change );
                ...
            },
            //------------------------------------------------------------------
            on_change: function(event) {
                var context = event.data.context; // 4
            var o       = context.options;

                o.id = ''; // 5

                var sel = this; // event handler context
                var selectedIndex = sel.selectedIndex;
                if (selectedIndex < 0) return;

                o.id = sel.options[selectedIndex].value; // 5

                context.update_ui(); // 6
            },
            //------------------------------------------------------------------
        } 
    );
    //--------------------------------------------------------------------------
    $.extend( $.ui.my_ui_widget, {
        getter       : "id",
        getterSetter : "xxx, yyy",

        defaults : {
               ...
             context   : undefined, // 1
             ...
             on_change : undefined,
               ...
            }
        }
    );
    //--------------------------------------------------------------------------
})(jQuery);

$(document).ready(function() {
    $('.my_ui_widget').each( function(i) {
            var id = this.id;
            var mode = '';

            try{
                mode = this.attributes['mode'].value;
            } catch(err) {
                mode = 'unlinked';
            }

            $('#'+id).my_ui_widget( {id:id, mode:mode} );
        }
    );
});

1. Enable context from the beginning
2. Remember the widget's this as context (or self if preferred)
3. Pass the context in the jquery way to event handler
4. Extract when needed on the handler side
5. Access the widget data
6. Call widget methods as needed