How to extend a jquery ui widget ? (1.7)

Question

I would like to create a custom version of the sortable widget. I have been searching for documentation, but could not find something really accurate. The best information I found was : http://jqueryui.pbworks.com/Widget-factory.

I tried :

$.widget("ui.customsortable", $.extend($.ui.sortable, {
  _init: function() {
    $.widget.prototype._init.apply(this, arguments);
  }
}));

But $.widget.prototype._init is not the function I want to call I guess since it is the $.widget prototype.

Then, I tried something I read here and there :

var _init = $.ui.sortable.prototype._init; 

$.widget("ui.customsortable", $.extend($.ui.sortable, {
  _init: function() {
    _init.apply(this, arguments);
  },
}));

But :

• I can't believe I have to store all methods I want to override like this, it is so ugly.
• It throws an error ("this.refresh is not a function"), which means the refresh method does not exist. Does that mean I would have to recreate all methods I want to override ? What's the point of extending in that case ?

Am I missing something here ?

Thanks for your help !

Answer 1

These are kinda strange answers. There is an optional second parameter - basewidget to inherit from. It's easy. No need to work with prototype and so on.

$.widget( "ui.customsortable", $.ui.sortable, {    _init: function() {     this.element.data('sortable', this.element.data('customsortable'));     // or whatever you want   } } ); 

The second parameter is $.ui.sortable. I think it's all you need.

Answer 2

After several tries, I finally found out how to do this easily :

$.widget("ui.customsortable", $.extend({}, $.ui.sortable.prototype, {    _init: function(){     this.element.data('sortable', this.element.data('customsortable'));     return $.ui.sortable.prototype._init.apply(this, arguments);   }    // Override other methods here.  }));  $.ui.customsortable.defaults = $.extend({}, $.ui.sortable.defaults); 

The key is to copy data from your custom widget to the original one. Don't forget to use $.ui.sortable.prototype.[overriden method].apply(this, arguments); in each overriden method.

Holly crap !

Answer 3

Regarding the selected solution above:

$.widget("ui.customsortable", $.extend(true, {}, $.ui.sortable.prototype, {

If you are extending one objects options into another, the [deep] flag of true will give you the desired results.