I''m trying to attach effects to elements in my onload handler and my
lack of Javascript-fu is showing... I want to call the effect from
the onclick handler of an anchor inside the div I want the effect to
apply to. Here''s what I''m trying to do:
function doOnLoad() {
var filters = document.getElementsByName(''filter'');
for (var i = 0; i < filters.length; i++) {
var filter = filters[i];
var trigger =
filter.getElementsByTagName(''a'')[0];
//trigger.onclick = function() { new Effect.SlideUp
(filter); }
trigger.onclick = function() {
filter = this.parentNode.parentNode.parentNode;
Effect.SlideUp(filter);
}
}
}
The trouble is, when the onclick handler fires, ''filter''
always
refers to the last thing it was set to during doOnLoad() due to
Javascript''s lexical scoping rules. I''ve managed to work
around it by
using the ugly parentNode.parentNode... construct, but is there a
better way?
--
Laurie Harper
Open Source advocate, Java geek: http://www.holoweb.net/laurie
Founder, Zotech Software: http://www.zotechsoftware.com/
Anyone have any suggestions on this? How do I fire an effect from an event handler without defining the event handler inline (i.e. with onclick="Effect.SlideUp(this.parentNode...)" or something)? I want the onclick handler of one element to apply an effect to a different element (a containing element in this case, but I''d like to have a general solution). Any guidance would be much appreciated :-) L. On 18-Sep-05, at 11:46 AM, Laurie Harper wrote:> I''m trying to attach effects to elements in my onload handler and > my lack of Javascript-fu is showing... I want to call the effect > from the onclick handler of an anchor inside the div I want the > effect to apply to. Here''s what I''m trying to do: > > function doOnLoad() { > var filters = document.getElementsByName(''filter''); > for (var i = 0; i < filters.length; i++) { > var filter = filters[i]; > var trigger = filter.getElementsByTagName(''a'')[0]; > //trigger.onclick = function() { new Effect.SlideUp > (filter); } > trigger.onclick = function() { > filter = this.parentNode.parentNode.parentNode; > Effect.SlideUp(filter); > } > } > } > > The trouble is, when the onclick handler fires, ''filter'' always > refers to the last thing it was set to during doOnLoad() due to > Javascript''s lexical scoping rules. I''ve managed to work around it > by using the ugly parentNode.parentNode... construct, but is there > a better way? > -- > Laurie Harper > Open Source advocate, Java geek: http://www.holoweb.net/laurie > Founder, Zotech Software: http://www.zotechsoftware.com/ > > > > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs@lists.rubyonrails.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs >-- Laurie Harper Open Source advocate, Java geek: http://www.holoweb.net/laurie Founder, Zotech Software: http://www.zotechsoftware.com/
SPENDLOVE, Matt, FM
2005-Sep-26 04:10 UTC
[Rails-spinoffs] Attaching effects during onload
Not sure I am fully understanding you but there are a few ways you can late
bind a fucntion to an event handler :
- Using Prototype
Event.observe(window, ''load'', myFunctionName, false);
See <http://www.sergiopereira.com/articles/prototype.js.html>
- Behaviour
http://bennolan.com/behaviour/
- Plain old JS
var someElement = document.getElementById(''someElementId'');
someElement.onclick = myFunctionName
HTH
Matt
> -----Original Message-----
> From: rails-spinoffs-bounces@lists.rubyonrails.org
> [mailto:rails-spinoffs-bounces@lists.rubyonrails.org] On
> Behalf Of Laurie Harper
> Sent: 23 September 2005 20:27
> To: rails-spinoffs@lists.rubyonrails.org
> Subject: Re: [Rails-spinoffs] Attaching effects during onload
>
>
> Anyone have any suggestions on this? How do I fire an effect from an
> event handler without defining the event handler inline (i.e. with
> onclick="Effect.SlideUp(this.parentNode...)" or something)? I
want
> the onclick handler of one element to apply an effect to a different
> element (a containing element in this case, but I''d like to have a
> general solution).
>
> Any guidance would be much appreciated :-)
>
> L.
>
> On 18-Sep-05, at 11:46 AM, Laurie Harper wrote:
>
> > I''m trying to attach effects to elements in my onload handler
and
> > my lack of Javascript-fu is showing... I want to call the effect
> > from the onclick handler of an anchor inside the div I want the
> > effect to apply to. Here''s what I''m trying to do:
> >
> > function doOnLoad() {
> > var filters =
document.getElementsByName(''filter'');
> > for (var i = 0; i < filters.length; i++) {
> > var filter = filters[i];
> > var trigger =
filter.getElementsByTagName(''a'')[0];
> > //trigger.onclick = function() { new Effect.SlideUp
> > (filter); }
> > trigger.onclick = function() {
> > filter = this.parentNode.parentNode.parentNode;
> > Effect.SlideUp(filter);
> > }
> > }
> > }
> >
> > The trouble is, when the onclick handler fires,
''filter'' always
> > refers to the last thing it was set to during doOnLoad() due to
> > Javascript''s lexical scoping rules. I''ve managed to
work around it
> > by using the ugly parentNode.parentNode... construct, but is there
> > a better way?
> > --
> > Laurie Harper
> > Open Source advocate, Java geek: http://www.holoweb.net/laurie
> > Founder, Zotech Software: http://www.zotechsoftware.com/
> >
> >
> >
> > _______________________________________________
> > Rails-spinoffs mailing list
> > Rails-spinoffs@lists.rubyonrails.org
> > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
> >
>
> --
> Laurie Harper
> Open Source advocate, Java geek: http://www.holoweb.net/laurie
> Founder, Zotech Software: http://www.zotechsoftware.com/
>
>
>
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs@lists.rubyonrails.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>
***********************************************************************************
The Royal Bank of Scotland plc. Registered in Scotland No 90312. Registered
Office: 36 St Andrew Square, Edinburgh EH2 2YB.
Authorised and regulated by the Financial Services Authority
This e-mail message is confidential and for use by the
addressee only. If the message is received by anyone other
than the addressee, please return the message to the sender
by replying to it and then delete the message from your
computer. Internet e-mails are not necessarily secure. The
Royal Bank of Scotland plc does not accept responsibility for
changes made to this message after it was sent.
Whilst all reasonable care has been taken to avoid the
transmission of viruses, it is the responsibility of the recipient to
ensure that the onward transmission, opening or use of this
message and any attachments will not adversely affect its
systems or data. No responsibility is accepted by The Royal
Bank of Scotland plc in this regard and the recipient should carry
out such virus and other checks as it considers appropriate.
Visit our websites at:
http://www.rbs.co.uk/CBFM
http://www.rbsmarkets.com
********************************************************************************
The problem isn''t getting a function assigned to an onclick handler, it''s how to pass that function the target element to apply the effect to. The sample code from my original post shows the issue:>>> function doOnLoad() { >>> var filters = document.getElementsByName(''filter''); >>> for (var i = 0; i < filters.length; i++) { >>> var filter = filters[i]; >>> var trigger = filter.getElementsByTagName(''a'')[0]; >>> //trigger.onclick = function() { new Effect.SlideUp >>> (filter); } >>> trigger.onclick = function() { >>> filter = this.parentNode.parentNode.parentNode; >>> Effect.SlideUp(filter); >>> } >>> } >>> }''filter'' is what I want the effect applied to, ''trigger'' is a child element whose onclick handler should fire the effect. When the handler is called, using the commented out version of the event handler, ''filter'' references the last item returned by getElementsByName instead of the value it had in the loop iteration that bound the event handler. L. On 26-Sep-05, at 3:46 AM, SPENDLOVE, Matt, FM wrote:> Not sure I am fully understanding you but there are a few ways you > can late > bind a fucntion to an event handler : > > - Using Prototype > > Event.observe(window, ''load'', myFunctionName, false); > See <http://www.sergiopereira.com/articles/prototype.js.html> > > - Behaviour > > http://bennolan.com/behaviour/ > > - Plain old JS > > var someElement = document.getElementById(''someElementId''); > someElement.onclick = myFunctionName > > HTH > > Matt > > >> -----Original Message----- >> From: rails-spinoffs-bounces@lists.rubyonrails.org >> [mailto:rails-spinoffs-bounces@lists.rubyonrails.org] On >> Behalf Of Laurie Harper >> Sent: 23 September 2005 20:27 >> To: rails-spinoffs@lists.rubyonrails.org >> Subject: Re: [Rails-spinoffs] Attaching effects during onload >> >> >> Anyone have any suggestions on this? How do I fire an effect from an >> event handler without defining the event handler inline (i.e. with >> onclick="Effect.SlideUp(this.parentNode...)" or something)? I want >> the onclick handler of one element to apply an effect to a different >> element (a containing element in this case, but I''d like to have a >> general solution). >> >> Any guidance would be much appreciated :-) >> >> L. >> >> On 18-Sep-05, at 11:46 AM, Laurie Harper wrote: >> >> >>> I''m trying to attach effects to elements in my onload handler and >>> my lack of Javascript-fu is showing... I want to call the effect >>> from the onclick handler of an anchor inside the div I want the >>> effect to apply to. Here''s what I''m trying to do: >>> >>> function doOnLoad() { >>> var filters = document.getElementsByName(''filter''); >>> for (var i = 0; i < filters.length; i++) { >>> var filter = filters[i]; >>> var trigger = filter.getElementsByTagName(''a'')[0]; >>> //trigger.onclick = function() { new Effect.SlideUp >>> (filter); } >>> trigger.onclick = function() { >>> filter = this.parentNode.parentNode.parentNode; >>> Effect.SlideUp(filter); >>> } >>> } >>> } >>> >>> The trouble is, when the onclick handler fires, ''filter'' always >>> refers to the last thing it was set to during doOnLoad() due to >>> Javascript''s lexical scoping rules. I''ve managed to work around it >>> by using the ugly parentNode.parentNode... construct, but is there >>> a better way? >>> -- >>> Laurie Harper >>> Open Source advocate, Java geek: http://www.holoweb.net/laurie >>> Founder, Zotech Software: http://www.zotechsoftware.com/ >>> >>> >>> >>> _______________________________________________ >>> Rails-spinoffs mailing list >>> Rails-spinoffs@lists.rubyonrails.org >>> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs >>> >>> >> >> -- >> Laurie Harper >> Open Source advocate, Java geek: http://www.holoweb.net/laurie >> Founder, Zotech Software: http://www.zotechsoftware.com/ >> >> >> >> _______________________________________________ >> Rails-spinoffs mailing list >> Rails-spinoffs@lists.rubyonrails.org >> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs >> >> > > > ********************************************************************** > ************* > The Royal Bank of Scotland plc. Registered in Scotland No 90312. > Registered Office: 36 St Andrew Square, Edinburgh EH2 2YB. > Authorised and regulated by the Financial Services Authority > > This e-mail message is confidential and for use by the > addressee only. If the message is received by anyone other > than the addressee, please return the message to the sender > by replying to it and then delete the message from your > computer. Internet e-mails are not necessarily secure. The > Royal Bank of Scotland plc does not accept responsibility for > changes made to this message after it was sent. > > Whilst all reasonable care has been taken to avoid the > transmission of viruses, it is the responsibility of the recipient to > ensure that the onward transmission, opening or use of this > message and any attachments will not adversely affect its > systems or data. No responsibility is accepted by The Royal > Bank of Scotland plc in this regard and the recipient should carry > out such virus and other checks as it considers appropriate. > > Visit our websites at: > http://www.rbs.co.uk/CBFM > http://www.rbsmarkets.com > > > ********************************************************************** > ********** > > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs@lists.rubyonrails.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs >-- Laurie Harper Open Source advocate, Java geek: http://www.holoweb.net/laurie Founder, Zotech Software: http://www.zotechsoftware.com/