[jQuery] Re: How can I add a TRUE custom event or modify existing jQuery functions?
Nice, let me know how it goes.
On Sun, Jan 11, 2009 at 2:05 PM, kape wrote:
>
> Thanks, I'll actually give that a try.
>
> On Jan 11, 9:46 am, Ariel Flesler wrote:
>> I just made a plugin to do EXACTLY what you're asking for.
>> It's not formally released yet so there's no documentation. If you
>> want, you can use it.
>>
>> http://test.flesler.com/jquery.broadcast/
>>
>> Note that it requires jQuery 1.3. That means you need to use the
>> version on trunk or any of the recently released betas.
>>
>> Cheers
>> --
>> Ariel Fleslerhttp://flesler.blogspot.com
>>
>> On Jan 9, 5:30 pm, kape wrote:
>>
>> > I have created custom styled buttons in my page and would like to
>> > toggle their class and therefore their look when they get disabled or
>> > enabled. So is there any way to call a function when .removeAttr
>> > ('disabled'), .attr('disabled', ''), and .attr('disabled', 'disabled')
>> > are invoked? Basically, is there any way to have enable/disable act
>> > like an event such as click, mouseover, etc.?
>>
>> > I've tried overwriting the jQuery function as follows:
>>
>> > jQuery.fn.removeAttr = function(name) {
>> > if(this.eq(0).hasClass('buttonDisabled') && name ==
>> > 'disabled')
>> > this.eq(0).removeClass('buttonDisabled');
>> > jQuery.attr(this.get(0), name, "" );
>> > if (this.get(0).nodeType == 1)
>> > this.get(0).removeAttribute(name);
>> > };
>>
>> > and when $('.buttonDisabled').removeAttr('disabled') is called, the
>> > disabled attribute and buttonDisabled class are removed. This is what
>> > I want, but it doesn't seem right. I shouldn't be overwriting the
>> > removeAttr function. Also, I'd have to do the same thing for jQuery's
>> > attr() function to add the buttonDisabled class when .attr('disabled',
>> > 'disabled') is called. Can I add the code I need to the functions and
>> > then call "super" somehow? Is there a simpler way to achieve what I
>> > want?
> >
>
--
Ariel Flesler
http://flesler.blogspot.com
[jQuery] Re: How can I add a TRUE custom event or modify existing jQuery functions?
Thanks, I'll actually give that a try.
On Jan 11, 9:46 am, Ariel Flesler wrote:
> I just made a plugin to do EXACTLY what you're asking for.
> It's not formally released yet so there's no documentation. If you
> want, you can use it.
>
> http://test.flesler.com/jquery.broadcast/
>
> Note that it requires jQuery 1.3. That means you need to use the
> version on trunk or any of the recently released betas.
>
> Cheers
> --
> Ariel Fleslerhttp://flesler.blogspot.com
>
> On Jan 9, 5:30 pm, kape wrote:
>
> > I have created custom styled buttons in my page and would like to
> > toggle their class and therefore their look when they get disabled or
> > enabled. So is there any way to call a function when .removeAttr
> > ('disabled'), .attr('disabled', ''), and .attr('disabled', 'disabled')
> > are invoked? Basically, is there any way to have enable/disable act
> > like an event such as click, mouseover, etc.?
>
> > I've tried overwriting the jQuery function as follows:
>
> > jQuery.fn.removeAttr = function(name) {
> > if(this.eq(0).hasClass('buttonDisabled') && name ==
> > 'disabled')
> > this.eq(0).removeClass('buttonDisabled');
> > jQuery.attr(this.get(0), name, "" );
> > if (this.get(0).nodeType == 1)
> > this.get(0).removeAttribute(name);
> > };
>
> > and when $('.buttonDisabled').removeAttr('disabled') is called, the
> > disabled attribute and buttonDisabled class are removed. This is what
> > I want, but it doesn't seem right. I shouldn't be overwriting the
> > removeAttr function. Also, I'd have to do the same thing for jQuery's
> > attr() function to add the buttonDisabled class when .attr('disabled',
> > 'disabled') is called. Can I add the code I need to the functions and
> > then call "super" somehow? Is there a simpler way to achieve what I
> > want?
[jQuery] Re: How can I add a TRUE custom event or modify existing jQuery functions?
I just made a plugin to do EXACTLY what you're asking for.
It's not formally released yet so there's no documentation. If you
want, you can use it.
http://test.flesler.com/jquery.broadcast/
Note that it requires jQuery 1.3. That means you need to use the
version on trunk or any of the recently released betas.
Cheers
--
Ariel Flesler
http://flesler.blogspot.com
On Jan 9, 5:30 pm, kape wrote:
> I have created custom styled buttons in my page and would like to
> toggle their class and therefore their look when they get disabled or
> enabled. So is there any way to call a function when .removeAttr
> ('disabled'), .attr('disabled', ''), and .attr('disabled', 'disabled')
> are invoked? Basically, is there any way to have enable/disable act
> like an event such as click, mouseover, etc.?
>
> I've tried overwriting the jQuery function as follows:
>
> jQuery.fn.removeAttr = function(name) {
> if(this.eq(0).hasClass('buttonDisabled') && name ==
> 'disabled')
> this.eq(0).removeClass('buttonDisabled');
> jQuery.attr(this.get(0), name, "" );
> if (this.get(0).nodeType == 1)
> this.get(0).removeAttribute(name);
> };
>
> and when $('.buttonDisabled').removeAttr('disabled') is called, the
> disabled attribute and buttonDisabled class are removed. This is what
> I want, but it doesn't seem right. I shouldn't be overwriting the
> removeAttr function. Also, I'd have to do the same thing for jQuery's
> attr() function to add the buttonDisabled class when .attr('disabled',
> 'disabled') is called. Can I add the code I need to the functions and
> then call "super" somehow? Is there a simpler way to achieve what I
> want?
[jQuery] Re: How can I add a TRUE custom event or modify existing jQuery functions?
There used to be a plugin that provided callbacks for all of jQuery's
methods, but I can't find it anymore.
On Jan 9, 7:38 pm, kape wrote:
> I'm not sure I understand your approach, however, it seems like
> getting it to work would mean calling $('#elem').enable and $
> ('#elem').disable, which are not $('#elem').removeAttr('disable'), $
> ('#elem').attr('disabled', ''), or $('#elem').attr('disabled', '') so
> your approach is not transparent.
>
> I can improve on my earlyer post as follows:
>
> var superRemoveAttr = $.fn.removeAttr;
> $.fn.removeAttr = function(name) {
> if(name == 'disabled') {
> this.each(function() {
> return $(this).hasClass('buttonDisabled');
> }).removeClass('buttonDisabled');
> }
> superRemoveAttr.call(this, name);
> };
>
> But again, I think there should be a better way without overwriting
> the jQuery functions.
>
> On Jan 9, 2:44 pm, Eric Garside wrote:
>
> > $.fn.enable = function(callback){
> > return this.each(function(){
> > if (callback) return $(this).data('enableCB', callback);
> > if (typeof $(this).data('enableCB') == 'function') $(this).data
> > ('enableCB')();
> > });
>
> > }
>
> > $.fn.disable = function(callback){
> > return this.each(function(){
> > if (callback) return $(this).data('disableCB', callback);
> > if (typeof $(this).data('disableCB') == 'function') $
> > (this).data('disableCB')();
> > });
>
> > }
>
> > These functions aren't tested, but I'm pretty sure they will give you
> > what you want (simulating the event structure in jQuery).
>
> > If you call $('#elem').enable(function(){ /* Do something */ }); it
> > will set the event handler.
> > If you then call $('#elem').enable(), it will trigger the callback, if
> > one exists.
>
> > That help at all?
>
> > On Jan 9, 2:30 pm, kape wrote:
>
> > > I have created custom styled buttons in my page and would like to
> > > toggle their class and therefore their look when they get disabled or
> > > enabled. So is there any way to call a function when .removeAttr
> > > ('disabled'), .attr('disabled', ''), and .attr('disabled', 'disabled')
> > > are invoked? Basically, is there any way to have enable/disable act
> > > like an event such as click, mouseover, etc.?
>
> > > I've tried overwriting the jQuery function as follows:
>
> > > jQuery.fn.removeAttr = function(name) {
> > > if(this.eq(0).hasClass('buttonDisabled') && name ==
> > > 'disabled')
> > > this.eq(0).removeClass('buttonDisabled');
> > > jQuery.attr(this.get(0), name, "" );
> > > if (this.get(0).nodeType == 1)
> > > this.get(0).removeAttribute(name);
> > > };
>
> > > and when $('.buttonDisabled').removeAttr('disabled') is called, the
> > > disabled attribute and buttonDisabled class are removed. This is what
> > > I want, but it doesn't seem right. I shouldn't be overwriting the
> > > removeAttr function. Also, I'd have to do the same thing for jQuery's
> > > attr() function to add the buttonDisabled class when .attr('disabled',
> > > 'disabled') is called. Can I add the code I need to the functions and
> > > then call "super" somehow? Is there a simpler way to achieve what I
> > > want?
[jQuery] Re: How can I add a TRUE custom event or modify existing jQuery functions?
Sorry, I did misunderstand. I thought your intent was to create a
custom event. As for the hooking of functions, it seems like a bad
idea, in general. Everytime you go to remove an attribute now, jQuery
has to step through some additional code which it really shouldn't.
Why not just do something like:
$('#elem').removeClass('buttonDisabled').removeAttribute('disabled');
On Jan 9, 4:38 pm, kape wrote:
> I'm not sure I understand your approach, however, it seems like
> getting it to work would mean calling $('#elem').enable and $
> ('#elem').disable, which are not $('#elem').removeAttr('disable'), $
> ('#elem').attr('disabled', ''), or $('#elem').attr('disabled', '') so
> your approach is not transparent.
>
> I can improve on my earlyer post as follows:
>
> var superRemoveAttr = $.fn.removeAttr;
> $.fn.removeAttr = function(name) {
> if(name == 'disabled') {
> this.each(function() {
> return $(this).hasClass('buttonDisabled');
> }).removeClass('buttonDisabled');
> }
> superRemoveAttr.call(this, name);
> };
>
> But again, I think there should be a better way without overwriting
> the jQuery functions.
>
> On Jan 9, 2:44 pm, Eric Garside wrote:
>
> > $.fn.enable = function(callback){
> > return this.each(function(){
> > if (callback) return $(this).data('enableCB', callback);
> > if (typeof $(this).data('enableCB') == 'function') $(this).data
> > ('enableCB')();
> > });
>
> > }
>
> > $.fn.disable = function(callback){
> > return this.each(function(){
> > if (callback) return $(this).data('disableCB', callback);
> > if (typeof $(this).data('disableCB') == 'function') $
> > (this).data('disableCB')();
> > });
>
> > }
>
> > These functions aren't tested, but I'm pretty sure they will give you
> > what you want (simulating the event structure in jQuery).
>
> > If you call $('#elem').enable(function(){ /* Do something */ }); it
> > will set the event handler.
> > If you then call $('#elem').enable(), it will trigger the callback, if
> > one exists.
>
> > That help at all?
>
> > On Jan 9, 2:30 pm, kape wrote:
>
> > > I have created custom styled buttons in my page and would like to
> > > toggle their class and therefore their look when they get disabled or
> > > enabled. So is there any way to call a function when .removeAttr
> > > ('disabled'), .attr('disabled', ''), and .attr('disabled', 'disabled')
> > > are invoked? Basically, is there any way to have enable/disable act
> > > like an event such as click, mouseover, etc.?
>
> > > I've tried overwriting the jQuery function as follows:
>
> > > jQuery.fn.removeAttr = function(name) {
> > > if(this.eq(0).hasClass('buttonDisabled') && name ==
> > > 'disabled')
> > > this.eq(0).removeClass('buttonDisabled');
> > > jQuery.attr(this.get(0), name, "" );
> > > if (this.get(0).nodeType == 1)
> > > this.get(0).removeAttribute(name);
> > > };
>
> > > and when $('.buttonDisabled').removeAttr('disabled') is called, the
> > > disabled attribute and buttonDisabled class are removed. This is what
> > > I want, but it doesn't seem right. I shouldn't be overwriting the
> > > removeAttr function. Also, I'd have to do the same thing for jQuery's
> > > attr() function to add the buttonDisabled class when .attr('disabled',
> > > 'disabled') is called. Can I add the code I need to the functions and
> > > then call "super" somehow? Is there a simpler way to achieve what I
> > > want?
[jQuery] Re: How can I add a TRUE custom event or modify existing jQuery functions?
Can you just use CSS to style the buttons?
button { color: #000 }
button[disabled=disabled] { color: #ccc }
[jQuery] Re: How can I add a TRUE custom event or modify existing jQuery functions?
I'm not sure I understand your approach, however, it seems like
getting it to work would mean calling $('#elem').enable and $
('#elem').disable, which are not $('#elem').removeAttr('disable'), $
('#elem').attr('disabled', ''), or $('#elem').attr('disabled', '') so
your approach is not transparent.
I can improve on my earlyer post as follows:
var superRemoveAttr = $.fn.removeAttr;
$.fn.removeAttr = function(name) {
if(name == 'disabled') {
this.each(function() {
return $(this).hasClass('buttonDisabled');
}).removeClass('buttonDisabled');
}
superRemoveAttr.call(this, name);
};
But again, I think there should be a better way without overwriting
the jQuery functions.
On Jan 9, 2:44 pm, Eric Garside wrote:
> $.fn.enable = function(callback){
> return this.each(function(){
> if (callback) return $(this).data('enableCB', callback);
> if (typeof $(this).data('enableCB') == 'function') $(this).data
> ('enableCB')();
> });
>
> }
>
> $.fn.disable = function(callback){
> return this.each(function(){
> if (callback) return $(this).data('disableCB', callback);
> if (typeof $(this).data('disableCB') == 'function') $
> (this).data('disableCB')();
> });
>
> }
>
> These functions aren't tested, but I'm pretty sure they will give you
> what you want (simulating the event structure in jQuery).
>
> If you call $('#elem').enable(function(){ /* Do something */ }); it
> will set the event handler.
> If you then call $('#elem').enable(), it will trigger the callback, if
> one exists.
>
> That help at all?
>
> On Jan 9, 2:30 pm, kape wrote:
>
> > I have created custom styled buttons in my page and would like to
> > toggle their class and therefore their look when they get disabled or
> > enabled. So is there any way to call a function when .removeAttr
> > ('disabled'), .attr('disabled', ''), and .attr('disabled', 'disabled')
> > are invoked? Basically, is there any way to have enable/disable act
> > like an event such as click, mouseover, etc.?
>
> > I've tried overwriting the jQuery function as follows:
>
> > jQuery.fn.removeAttr = function(name) {
> > if(this.eq(0).hasClass('buttonDisabled') && name ==
> > 'disabled')
> > this.eq(0).removeClass('buttonDisabled');
> > jQuery.attr(this.get(0), name, "" );
> > if (this.get(0).nodeType == 1)
> > this.get(0).removeAttribute(name);
> > };
>
> > and when $('.buttonDisabled').removeAttr('disabled') is called, the
> > disabled attribute and buttonDisabled class are removed. This is what
> > I want, but it doesn't seem right. I shouldn't be overwriting the
> > removeAttr function. Also, I'd have to do the same thing for jQuery's
> > attr() function to add the buttonDisabled class when .attr('disabled',
> > 'disabled') is called. Can I add the code I need to the functions and
> > then call "super" somehow? Is there a simpler way to achieve what I
> > want?
[jQuery] Re: How can I add a TRUE custom event or modify existing jQuery functions?
$.fn.enable = function(callback){
return this.each(function(){
if (callback) return $(this).data('enableCB', callback);
if (typeof $(this).data('enableCB') == 'function') $(this).data
('enableCB')();
});
}
$.fn.disable = function(callback){
return this.each(function(){
if (callback) return $(this).data('disableCB', callback);
if (typeof $(this).data('disableCB') == 'function') $
(this).data('disableCB')();
});
}
These functions aren't tested, but I'm pretty sure they will give you
what you want (simulating the event structure in jQuery).
If you call $('#elem').enable(function(){ /* Do something */ }); it
will set the event handler.
If you then call $('#elem').enable(), it will trigger the callback, if
one exists.
That help at all?
On Jan 9, 2:30 pm, kape wrote:
> I have created custom styled buttons in my page and would like to
> toggle their class and therefore their look when they get disabled or
> enabled. So is there any way to call a function when .removeAttr
> ('disabled'), .attr('disabled', ''), and .attr('disabled', 'disabled')
> are invoked? Basically, is there any way to have enable/disable act
> like an event such as click, mouseover, etc.?
>
> I've tried overwriting the jQuery function as follows:
>
> jQuery.fn.removeAttr = function(name) {
> if(this.eq(0).hasClass('buttonDisabled') && name ==
> 'disabled')
> this.eq(0).removeClass('buttonDisabled');
> jQuery.attr(this.get(0), name, "" );
> if (this.get(0).nodeType == 1)
> this.get(0).removeAttribute(name);
> };
>
> and when $('.buttonDisabled').removeAttr('disabled') is called, the
> disabled attribute and buttonDisabled class are removed. This is what
> I want, but it doesn't seem right. I shouldn't be overwriting the
> removeAttr function. Also, I'd have to do the same thing for jQuery's
> attr() function to add the buttonDisabled class when .attr('disabled',
> 'disabled') is called. Can I add the code I need to the functions and
> then call "super" somehow? Is there a simpler way to achieve what I
> want?
