[Proto-Scripty] Re: Add event by class name
Hi,
The $$ function returns an array[1]. Arrays don't have an `observe`
method. However, Prototype does add an `invoke` method[2] to arrays by
mixing the Enumerable mix-in into them. So:
$$('input.compare_itm').invoke('observe', 'click', myFunction);
That said, you'll end up hooking the event on each individual element.
If it's an event that bubbles (and 'click' does bubble), you're
probably better off hooking the event once on an ancestor element
(could even be `document`) that all of those elements share, and then
checking whether the click was on one of your desired elements:
theAncestorElement.observe('click', myFunction);
function myFunction(event) {
var element = event.findElement('input.compare_itm');
if (element) {
// Process it
}
}
That uses the Element#findElement[3] feature. Alternately, as of
Prototype 1.7, you can use the new Element#on[4] feature. I haven't
used it, but I think that looks like this:
theAncestorElement.on('click', 'input.compare_itm', myFunction);
function myFunction(event, element) {
// Use the `element` arg to know which input was clicked
}
Very much worth taking an hour and reading through the API from
beginning to end.
HTH,
--
T.J. Crowder
Independent Software Consultant
tj / crowder software / com
www.crowdersoftware.com
[1] http://api.prototypejs.org/language/dollardollar/
[2] http://api.prototypejs.org/language/enumerable/prototype/invoke/
[3] http://api.prototypejs.org/dom/event/findelement/
[4] http://api.prototypejs.org/dom/event/on/
On Aug 23, 8:35 am, elivol eli...@gmail.com wrote:
Hello
I have a problem with adding event click to elements by class name.
I'm trying to add event onclick to all input tags that have class
compare_itm by this code:
$$('input.compare_itm').observe('click', myFunction);
But it doesn't work. Is it possible to do in Prototype ?
thanks
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
Re: [Proto-Scripty] Re: Add event by class name
Indeed T.J. catching bubbling events is something I need to consider more
often.
Thanks for the heads up :-)
On Mon, Aug 23, 2010 at 10:05 AM, T.J. Crowder t...@crowdersoftware.comwrote:
Hi,
The $$ function returns an array[1]. Arrays don't have an `observe`
method. However, Prototype does add an `invoke` method[2] to arrays by
mixing the Enumerable mix-in into them. So:
$$('input.compare_itm').invoke('observe', 'click', myFunction);
That said, you'll end up hooking the event on each individual element.
If it's an event that bubbles (and 'click' does bubble), you're
probably better off hooking the event once on an ancestor element
(could even be `document`) that all of those elements share, and then
checking whether the click was on one of your desired elements:
theAncestorElement.observe('click', myFunction);
function myFunction(event) {
var element = event.findElement('input.compare_itm');
if (element) {
// Process it
}
}
That uses the Element#findElement[3] feature. Alternately, as of
Prototype 1.7, you can use the new Element#on[4] feature. I haven't
used it, but I think that looks like this:
theAncestorElement.on('click', 'input.compare_itm', myFunction);
function myFunction(event, element) {
// Use the `element` arg to know which input was clicked
}
Very much worth taking an hour and reading through the API from
beginning to end.
HTH,
--
T.J. Crowder
Independent Software Consultant
tj / crowder software / com
www.crowdersoftware.com
[1] http://api.prototypejs.org/language/dollardollar/
[2] http://api.prototypejs.org/language/enumerable/prototype/invoke/
[3] http://api.prototypejs.org/dom/event/findelement/
[4] http://api.prototypejs.org/dom/event/on/
On Aug 23, 8:35 am, elivol eli...@gmail.com wrote:
Hello
I have a problem with adding event click to elements by class name.
I'm trying to add event onclick to all input tags that have class
compare_itm by this code:
$$('input.compare_itm').observe('click', myFunction);
But it doesn't work. Is it possible to do in Prototype ?
thanks
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to
prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.comprototype-scriptaculous%2bunsubscr...@googlegroups.com
.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: Add event by class name
thanks, it works !
Another question: how can I send element as argument to the click
function ?
I'm trying to use this:
$$('input.compare_itm').invoke('observe', 'click',
myFunction.bindAsEventListener('compare', this ));
function myFunction(group, elm){
alert(elm.value); // undefined
}
On Aug 23, 11:00 am, Johan Arensman johanm...@gmail.com wrote:
You are trying to apply a single method to a set of items. For this to work
you need to apply the same function to each member of the set using
invoke().
$$('input.compare_itm').invoke('observe', 'click', myFunction);
See also:http://api.prototypejs.org/language/enumerable/prototype/invoke/
Hope this helps!
Greets,
Johan
On Mon, Aug 23, 2010 at 9:35 AM, elivol eli...@gmail.com wrote:
Hello
I have a problem with adding event click to elements by class name.
I'm trying to add event onclick to all input tags that have class
compare_itm by this code:
$$('input.compare_itm').observe('click', myFunction);
But it doesn't work. Is it possible to do in Prototype ?
thanks
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to
prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.comprototype-scriptaculous%2bunsubscr...@googlegroups.com
.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: Add event by class name
Hi,
Another question: how can I send element as argument to the click
function ?
If you're using `observe`, Prototype ensures that within the event
handler, `this` refers to the element on which you called `observe`.
If you're using `on`, then the element will be the second argument to
your event handler. So basically, for the element itself, you don't
have to. E.g.:
$$('input.compare_itm').invoke('observe', 'click', myFunction);
function myFunction(event) {
// `this` points to the input that was being observed, so for
instance:
alert(You clicked the field with the value + this.value);
}
If you want to burn in additional arguments other than the element,
you can do that via Function#bind[1] (if you also need to change what
`this` means within the handler) or Function#curry[2] (if you don't).
Although you can use Function#bindAsEventListener, there's almost
never any reason to[3].
So for instance, if you want to curry the string compare:
$$('input.compare_itm').invoke('observe', 'click',
myFunction.curry(compare));
function myFunction(group, event) {
// `this` points to the input that was being observed, so for
instance:
alert(You clicked the field with the value + this.value + ,
group = + group);
}
Note that with #bind or #curry, the curried arguments appear before
the event argument. If you use #bindAsEventListener, they appear after
it.
Also note that if you use #bind or #bindAsEventListener, you're going
to override Prototype's default handling that ensures that `this` is
the element that was observed.
Looking at your quoted code, I suspect #curry plus Prototype's default
handling of `this` is what you're looking for.
[1] http://api.prototypejs.org/language/function/prototype/bind/
[2] http://api.prototypejs.org/language/function/prototype/curry/
[3]
http://proto-scripty.wikidot.com/prototype:tip-you-probably-don-t-need-bindaseventlistener
HTH,
--
T.J. Crowder
Independent Software Consultant
tj / crowder software / com
www.crowdersoftware.com
On Aug 23, 10:10 am, elivol eli...@gmail.com wrote:
thanks, it works !
Another question: how can I send element as argument to the click
function ?
I'm trying to use this:
$$('input.compare_itm').invoke('observe', 'click',
myFunction.bindAsEventListener('compare', this ));
function myFunction(group, elm){
alert(elm.value); // undefined
}
On Aug 23, 11:00 am, Johan Arensman johanm...@gmail.com wrote:
You are trying to apply a single method to a set of items. For this to work
you need to apply the same function to each member of the set using
invoke().
$$('input.compare_itm').invoke('observe', 'click', myFunction);
See also:http://api.prototypejs.org/language/enumerable/prototype/invoke/
Hope this helps!
Greets,
Johan
On Mon, Aug 23, 2010 at 9:35 AM, elivol eli...@gmail.com wrote:
Hello
I have a problem with adding event click to elements by class name.
I'm trying to add event onclick to all input tags that have class
compare_itm by this code:
$$('input.compare_itm').observe('click', myFunction);
But it doesn't work. Is it possible to do in Prototype ?
thanks
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to
prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.comprototype-scriptaculou
s%2bunsubscr...@googlegroups.com
.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
