CODEWITHSUNDEEP
jquery-ui
John Griffiths
John Griffiths

Reputation: 3433

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

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 ?

Upvotes: 3

Views: 3002

Answers (3)

Jens Bannmann
Jens Bannmann

Reputation: 5105

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.
},

Upvotes: 3

Magnus
Magnus

Reputation: 11

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;

   ...
}

Upvotes: 1

John Griffiths
John Griffiths

Reputation: 3433

(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

Upvotes: -1

Related Questions