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 ?
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.
},
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;
...
}
(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} );
}
);
});