Comments on: Extending jQuery UI Widgets

By: Danny

Danny — Thu, 22 Jul 2010 22:04:04 +0000

@Lee
Unfortunately, my life is kind of busy now, but I’ll try to take a look at this. It looks like it ought to work, but there may be something going on where the event handler is being bound before the subclass really exists, so it’s binding to the superclass.
Danny

By: Lee

Lee — Mon, 19 Jul 2010 12:58:44 +0000

@Danny:
Hopefully this bit of code sums it up:

$.ui.widget.subclass(‘ui.superwidget’,
{
_init: function()
{
// can’t catch this
this._trigger(‘anevent’);

// can catch this
this.element.trigger(‘superwidgetanevent’);
}
});

And creation and binding:
$(‘#test’).bind(‘superwidgetanevent’, function()
{
console.log(‘an event happened’)
});
$(‘#test’).superwidget();

By: Danny

Danny — Wed, 14 Jul 2010 02:28:10 +0000

@Lee:
I haven’t had any problems with event triggering, but I may not be using the code the same way you are. Can you post some more details?
–Danny

By: Lee

Lee — Tue, 06 Jul 2010 14:25:41 +0000

I can’t seem to catch any events I trigger in these widget subclasses. I call this._trigger as usual but can not seem to catch the event in the normal way.

By: Interval an Objekt hängen (jQuery) - php.de

Interval an Objekt hängen (jQuery) - php.de — Wed, 09 Jun 2010 05:40:13 +0000

[...] ui factory. Insbesondere wäre wohl die ui.progressbar für dich interessanter. ui developer guide extending ui widgets richtig gutes Tutorial auf deutsch: ui factory am Beispiel einer canvas map I ui factory am [...]

By: Danny

Danny — Thu, 25 Mar 2010 03:01:07 +0000

@alpha:
jQuery UI 1.8 just came out and broke everything. I’m going to have to rewrite this, sometime over the next two weeks, to use the new widget factory. I think it will be better, but don’t count on anything working (or go back to jQuery 1.7.2) until then.
–Danny

By: alpha

alpha — Wed, 24 Mar 2010 20:52:38 +0000

very nice tutorial.
I got a issue when a call to destroy is made: $.widget.prototype.apply is not a function
any clue?

By: Danny

Danny — Sun, 14 Mar 2010 07:38:04 +0000

@Christoph:
That’s got to be one of those quirk about named functions that is so inconsistent between javascript implementations. This one works in all the major browsers but evidently Dojo’s Shrinksafe parses the javascript differently. Thanks for the heads up!
(And why were you using Dojo? I had to ask! )
–Danny

By: Christoph

Christoph — Fri, 12 Mar 2010 10:54:51 +0000

Hey Danny,
just a minor quirk I encountered, when using Dojo Shrinksafe compression (don’t ask me why .

In the line: widget.subclass = subclass;
The “subclass” function reference is treated as an internal variable, and thus hashed to:
widget.subclass = _10;

Which of course fails at runtime.
I fixed that by using the namespaced function ref:

widget.subclass = $.ui.widget.subclass;

Other than that, works great.

Christoph

By: Danny

Danny — Sun, 28 Feb 2010 22:17:06 +0000

@Valentino: I think you actually meant this comment for the Widget Tutorial. Notwithstanding that, there's a subtlety here about how javascript handles prototypal inheritance: level is a variable in the prototype, so it is not copied into each instance. this.level refers to the prototype's level, which is shared with all instances. the general rule: when I refer to this.foo, Javascript searched the object for a property named foo, then the object's prototype, then the prototype's prototype, etc. If nothing is found, a new property is created in the individual object. --Danny