Hi Gert,
This is the problem line:
> var hours = $(task).select('.hours');
Element#select[1] returns an array (just like $$() does), not an
Element, but you're treating the return value like an Element.
BTW, you're doing more work than you need to in that code, in a couple
of ways. $$() returns pre-extended elements, so you don't have to re-
extend them with $() (even under IE). You can also avoid having to do
the latter select() by using CSS descendant selectors[2] (or child
selectors[3], if the "hours" elements are immediate children of the
"tasks" elements).
Here's a simplified version of that code that offloads more work to
the $$() function (this is off-the-cuff; you'll want to test it):
$$('.tasks .hours').each(function(hour) {
hour.observe('blur', function() { ... });
});
If you want each element to have its own copy of the function, the
above is fine, but if it's possible for them all to share the same
copy of the handler (it usually is, but sometimes not, and I don't
know what you're doing in the handler), you might want to do this:
var handler = function() { ... };
$$('.tasks .hours').each(function(hour) {
hour.observe('blur', handler);
});
Now all of the elements will share the same handler (which is more
memory-efficient), rather than each one having its own copy of it.
And (finally) if they can all share the same handler, you can also do
the above with Enumerable#invoke[4]:
$$('.tasks .hours').invoke('observe', 'blur', function()
{ ... } );
Enumerable#invoke is wonderfully concise as you can see, although it
runs a bit more slowly than doing your own loop; it only matters if
there are hundreds of these 'hours' elements.
[1] http://prototypejs.org/api/element/select
[2] http://www.w3.org/TR/CSS2/selector.html#descendant-selectors
[3] http://www.w3.org/TR/CSS2/selector.html#child-selectors
[4] http://prototypejs.org/api/enumerable/invoke
HTH,
--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available
On Jan 11, 2:20 pm, Gert <[email protected]> wrote:
> Hi,
>
> I have a problem with observe, since upgrading to Prototype 1.6
> in the old version getElementByClassname was used instead of select
> I have the following js which purpose is to add a blur event on every
> input element within a div
>
> // select divs with class="tasks"
> var tasks = $$('.tasks');
> tasks.each(function(task) {
> var hours = $(task).select('.hours');
> alert(hours); // this says [HTMLInputElement]
> $(hours).observe('blur', function(e) { alert('blurred'); });
>
> }
>
> the line with the observe gives a $(hours).observe is not a function
> anyone got an idea why this is not working?
>
> Thanks,
> Gertjan
--~--~---------~--~----~------------~-------~--~----~
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 [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
