Question

164

How to extend a jquery ui widget ? (1.7)

rated 0 times [ 166] [ 2] / answers: 1 / hits: 17730 / 15 Years ago, fri, march 26, 2010, 12:00:00

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 !

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

yisroels

Add To Favorites

Follow

Total Points: 256

Total Questions: 94

Total Answers: 102

Location: Chad

Member since Mon, Dec 5, 2022

2 Years ago

answered 15 Years ago ronniem · Accepted Answer

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 !