Rails spinoffs - Apr 2008 - Prototype: selecting all elements whose id starts with a certain string

Hi!

I want to (as the topic suggests) get a list/array of all elements on
a page whose id starts with a string using Prototype.
For example, I have several checkboxes like this:

<input type="checkbox" id="match_this_1">
<input type="checkbox" id="match_this_2">
<input type="checkbox" id="match_this_3">
<input type="checkbox" id="match_this_4">

I want to find these elements on my page based on the fact that their
ids start with "match_this".
Then I want to assign a onclick-function to the first checkbox that
disables all the other ones.
Can somebody help me out with how to do this with Prototype?
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

I''ll try to be careful this time.

1) Straight-forward way, only checks whether id starts with a string:
var elements =
$$(''input[type="checkbox"][id^="match_this_"]'');

2) A little more precise (based on regexp):
var elements =
$$(''input[type="checkbox"]'').findAll(function(el)
{ return /^match_this_\d$/.test(el.id) });

Then:

elements.shift().observe(''click'', function(e) {
  elements.invoke(''writeAttribute'',
''disabled'', e.target.checked);
})

- kangax


On Apr 27, 6:40 pm, zoopzoop
<manuel.meu...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> Hi!
>
> I want to (as the topic suggests) get a list/array of all elements on
> a page whose id starts with a string using Prototype.
> For example, I have several checkboxes like this:
>
> <input type="checkbox" id="match_this_1">
> <input type="checkbox" id="match_this_2">
> <input type="checkbox" id="match_this_3">
> <input type="checkbox" id="match_this_4">
>
> I want to find these elements on my page based on the fact that their
> ids start with "match_this".
> Then I want to assign a onclick-function to the first checkbox that
> disables all the other ones.
> Can somebody help me out with how to do this with Prototype?
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Nice, I''ll try this!
Thanks a lot!

/z

On Apr 28, 1:23 am, kangax
<kan...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> I''ll try to be careful this time.
>
> 1) Straight-forward way, only checks whether id starts with a string:
> var elements =
$$(''input[type="checkbox"][id^="match_this_"]'');
>
> 2) A little more precise (based on regexp):
> var elements =
$$(''input[type="checkbox"]'').findAll(function(el)
> { return /^match_this_\d$/.test(el.id) });
>
> Then:
>
> elements.shift().observe(''click'', function(e) {
>   elements.invoke(''writeAttribute'',
''disabled'', e.target.checked);
>
> })
>
> - kangax
>
> On Apr 27, 6:40 pm, zoopzoop
<manuel.meu...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > Hi!
>
> > I want to (as the topic suggests) get a list/array of all elements on
> > a page whose id starts with a string using Prototype.
> > For example, I have several checkboxes like this:
>
> > <input type="checkbox" id="match_this_1">
> > <input type="checkbox" id="match_this_2">
> > <input type="checkbox" id="match_this_3">
> > <input type="checkbox" id="match_this_4">
>
> > I want to find these elements on my page based on the fact that their
> > ids start with "match_this".
> > Then I want to assign a onclick-function to the first checkbox that
> > disables all the other ones.
> > Can somebody help me out with how to do this with Prototype?
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

@kangax -
> elements.shift().observe(''click'', function(e) {
>   elements.invoke(''writeAttribute'',
''disabled'', e.target.checked);
That is just so...elegant.  Took me a while to figure it out (missed
that part of the OP''s question) and *wow* would I comment it, but
seriously:  Nice.
--
T.J. Crowder
tj / crowder software / com

On Apr 28, 12:23 am, kangax
<kan...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> I''ll try to be careful this time.
>
> 1) Straight-forward way, only checks whether id starts with a string:
> var elements =
$$(''input[type="checkbox"][id^="match_this_"]'');
>
> 2) A little more precise (based on regexp):
> var elements =
$$(''input[type="checkbox"]'').findAll(function(el)
> { return /^match_this_\d$/.test(el.id) });
>
> Then:
>
> elements.shift().observe(''click'', function(e) {
>   elements.invoke(''writeAttribute'',
''disabled'', e.target.checked);
>
> })
>
> - kangax
>
> On Apr 27, 6:40 pm, zoopzoop
<manuel.meu...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > Hi!
>
> > I want to (as the topic suggests) get a list/array of all elements on
> > a page whose id starts with a string using Prototype.
> > For example, I have several checkboxes like this:
>
> > <input type="checkbox" id="match_this_1">
> > <input type="checkbox" id="match_this_2">
> > <input type="checkbox" id="match_this_3">
> > <input type="checkbox" id="match_this_4">
>
> > I want to find these elements on my page based on the fact that their
> > ids start with "match_this".
> > Then I want to assign a onclick-function to the first checkbox that
> > disables all the other ones.
> > Can somebody help me out with how to do this with Prototype?
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Thanks, T.J. : )

I''m still in doubt, though, whether "elegant" code is better
than
straightforward one.
If it wasn''t straight-obvious for you what the snippet does,
there''s a
big chance it won''t be obvious for another developer looking at it (or
to myself in half a year) :)

- kangax

On Apr 28, 9:36 am, "T.J. Crowder"
<tjcrow...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> @kangax -
>
> > elements.shift().observe(''click'', function(e) {
> >   elements.invoke(''writeAttribute'',
''disabled'', e.target.checked);
>
> That is just so...elegant.  Took me a while to figure it out (missed
> that part of the OP''s question) and *wow* would I comment it, but
> seriously:  Nice.
> --
> T.J. Crowder
> tj / crowder software / com
>
> On Apr 28, 12:23 am, kangax
<kan...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > I''ll try to be careful this time.
>
> > 1) Straight-forward way, only checks whether id starts with a string:
> > var elements =
$$(''input[type="checkbox"][id^="match_this_"]'');
>
> > 2) A little more precise (based on regexp):
> > var elements =
$$(''input[type="checkbox"]'').findAll(function(el)
> > { return /^match_this_\d$/.test(el.id) });
>
> > Then:
>
> > elements.shift().observe(''click'', function(e) {
> >   elements.invoke(''writeAttribute'',
''disabled'', e.target.checked);
>
> > })
>
> > - kangax
>
> > On Apr 27, 6:40 pm, zoopzoop
<manuel.meu...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > > Hi!
>
> > > I want to (as the topic suggests) get a list/array of all
elements on
> > > a page whose id starts with a string using Prototype.
> > > For example, I have several checkboxes like this:
>
> > > <input type="checkbox"
id="match_this_1">
> > > <input type="checkbox"
id="match_this_2">
> > > <input type="checkbox"
id="match_this_3">
> > > <input type="checkbox"
id="match_this_4">
>
> > > I want to find these elements on my page based on the fact that
their
> > > ids start with "match_this".
> > > Then I want to assign a onclick-function to the first checkbox
that
> > > disables all the other ones.
> > > Can somebody help me out with how to do this with Prototype?
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Follow-up question:

I played around a bit and changed my design.
Now I have some checkboxes (still with ids starting with
"match_this_") and want to check them all with a click on a link.

function selectAllCheckboxes() {
   
$$(''*[id^="match_this_"]'').invoke(''writeAttribute'',
''checked'');
}

This works fine in IE7 but not in FF2.
In FF2, it works when I click it the first time but then, when I
uncheck some checkboxes and click the link again, they don''t become
checked again.
I don''t get any JS error in the error console or Firebug either.
Does the writeAttribute function have some quirks in FF2?

/z

On Apr 28, 5:41 pm, kangax
<kan...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> Thanks, T.J. : )
>
> I''m still in doubt, though, whether "elegant" code is
better than
> straightforward one.
> If it wasn''t straight-obvious for you what the snippet does,
there''s a
> big chance it won''t be obvious for another developer looking at it
(or
> to myself in half a year) :)
>
> - kangax
>
> On Apr 28, 9:36 am, "T.J. Crowder"
<tjcrow...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > @kangax -
>
> > > elements.shift().observe(''click'', function(e) {
> > >   elements.invoke(''writeAttribute'',
''disabled'', e.target.checked);
>
> > That is just so...elegant.  Took me a while to figure it out (missed
> > that part of the OP''s question) and *wow* would I comment it,
but
> > seriously:  Nice.
> > --
> > T.J. Crowder
> > tj / crowder software / com
>
> > On Apr 28, 12:23 am, kangax
<kan...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > > I''ll try to be careful this time.
>
> > > 1) Straight-forward way, only checks whether id starts with a
string:
> > > var elements =
$$(''input[type="checkbox"][id^="match_this_"]'');
>
> > > 2) A little more precise (based on regexp):
> > > var elements =
$$(''input[type="checkbox"]'').findAll(function(el)
> > > { return /^match_this_\d$/.test(el.id) });
>
> > > Then:
>
> > > elements.shift().observe(''click'', function(e) {
> > >   elements.invoke(''writeAttribute'',
''disabled'', e.target.checked);
>
> > > })
>
> > > - kangax
>
> > > On Apr 27, 6:40 pm, zoopzoop
<manuel.meu...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > > > Hi!
>
> > > > I want to (as the topic suggests) get a list/array of all
elements on
> > > > a page whose id starts with a string using Prototype.
> > > > For example, I have several checkboxes like this:
>
> > > > <input type="checkbox"
id="match_this_1">
> > > > <input type="checkbox"
id="match_this_2">
> > > > <input type="checkbox"
id="match_this_3">
> > > > <input type="checkbox"
id="match_this_4">
>
> > > > I want to find these elements on my page based on the fact
that their
> > > > ids start with "match_this".
> > > > Then I want to assign a onclick-function to the first
checkbox that
> > > > disables all the other ones.
> > > > Can somebody help me out with how to do this with Prototype?
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Try passing "true" explicitly:
...
$$(''*[id^="match_this_"]'').invoke(''writeAttribute'',
''checked'', true);

- kangax

On Apr 28, 12:34 pm, zoopzoop
<manuel.meu...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> Follow-up question:
>
> I played around a bit and changed my design.
> Now I have some checkboxes (still with ids starting with
> "match_this_") and want to check them all with a click on a link.
>
> function selectAllCheckboxes() {
>    
$$(''*[id^="match_this_"]'').invoke(''writeAttribute'',
''checked'');
>
> }
>
> This works fine in IE7 but not in FF2.
> In FF2, it works when I click it the first time but then, when I
> uncheck some checkboxes and click the link again, they don''t
become
> checked again.
> I don''t get any JS error in the error console or Firebug either.
> Does the writeAttribute function have some quirks in FF2?
>
> /z
>
> On Apr 28, 5:41 pm, kangax
<kan...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> Thanks, T.J. :
)
>
> > I''m still in doubt, though, whether "elegant" code
is better than
> > straightforward one.
> > If it wasn''t straight-obvious for you what the snippet does,
there''s a
> > big chance it won''t be obvious for another developer looking
at it (or
> > to myself in half a year) :)
>
> > - kangax
>
> > On Apr 28, 9:36 am, "T.J. Crowder"
<tjcrow...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > > @kangax -
>
> > > > elements.shift().observe(''click'',
function(e) {
> > > >   elements.invoke(''writeAttribute'',
''disabled'', e.target.checked);
>
> > > That is just so...elegant.  Took me a while to figure it out
(missed
> > > that part of the OP''s question) and *wow* would I
comment it, but
> > > seriously:  Nice.
> > > --
> > > T.J. Crowder
> > > tj / crowder software / com
>
> > > On Apr 28, 12:23 am, kangax
<kan...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > > > I''ll try to be careful this time.
>
> > > > 1) Straight-forward way, only checks whether id starts with
a string:
> > > > var elements =
$$(''input[type="checkbox"][id^="match_this_"]'');
>
> > > > 2) A little more precise (based on regexp):
> > > > var elements =
$$(''input[type="checkbox"]'').findAll(function(el)
> > > > { return /^match_this_\d$/.test(el.id) });
>
> > > > Then:
>
> > > > elements.shift().observe(''click'',
function(e) {
> > > >   elements.invoke(''writeAttribute'',
''disabled'', e.target.checked);
>
> > > > })
>
> > > > - kangax
>
> > > > On Apr 27, 6:40 pm, zoopzoop
<manuel.meu...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > > > > Hi!
>
> > > > > I want to (as the topic suggests) get a list/array of
all elements on
> > > > > a page whose id starts with a string using Prototype.
> > > > > For example, I have several checkboxes like this:
>
> > > > > <input type="checkbox"
id="match_this_1">
> > > > > <input type="checkbox"
id="match_this_2">
> > > > > <input type="checkbox"
id="match_this_3">
> > > > > <input type="checkbox"
id="match_this_4">
>
> > > > > I want to find these elements on my page based on the
fact that their
> > > > > ids start with "match_this".
> > > > > Then I want to assign a onclick-function to the first
checkbox that
> > > > > disables all the other ones.
> > > > > Can somebody help me out with how to do this with
Prototype?
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

No, that does not work either.
I also tried ''true'' and ''checked'' but to no
avail...

The weird thing is, FF2 even behaves that way after I reload the page.
Like this:

1. I click on the link, all checkboxes become checked
2. I uncheck two of them
3. I click the link again, nothing happens, the two are still
unchecked
4. I reload the page (F5 or click on reload), all checkboxes become
unchecked
5. I click the link, all checkboxes EXCEPT the two I unchecked before
become checked

Seems like FF2 saves the state of these two checkboxes in some way.

To make it EVEN weirder (at least to me), if I don''t reload the page
by F5 or a click on the Reload button in step 4, but click in the
command line and on Enter, without changing the URL, ALL the
checkboxes become checked if I click on the link again...
Could somebody test this behavior with FF2 WinXP? Perhaps it''s one of
my extensions or something else.
Also, a test with another browser/OS other than IE7 or FF2 on WinXP
would be nice.

/z

On Apr 28, 7:25 pm, kangax
<kan...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> Try passing "true" explicitly:
> ...
>
$$(''*[id^="match_this_"]'').invoke(''writeAttribute'',
''checked'', true);
>
> - kangax
>
> On Apr 28, 12:34 pm, zoopzoop
<manuel.meu...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > Follow-up question:
>
> > I played around a bit and changed my design.
> > Now I have some checkboxes (still with ids starting with
> > "match_this_") and want to check them all with a click on a
link.
>
> > function selectAllCheckboxes() {
> >    
$$(''*[id^="match_this_"]'').invoke(''writeAttribute'',
''checked'');
>
> > }
>
> > This works fine in IE7 but not in FF2.
> > In FF2, it works when I click it the first time but then, when I
> > uncheck some checkboxes and click the link again, they don''t
become
> > checked again.
> > I don''t get any JS error in the error console or Firebug
either.
> > Does the writeAttribute function have some quirks in FF2?
>
> > /z
>
> > On Apr 28, 5:41 pm, kangax
<kan...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> Thanks, T.J. :
)
>
> > > I''m still in doubt, though, whether "elegant"
code is better than
> > > straightforward one.
> > > If it wasn''t straight-obvious for you what the snippet
does, there''s a
> > > big chance it won''t be obvious for another developer
looking at it (or
> > > to myself in half a year) :)
>
> > > - kangax
>
> > > On Apr 28, 9:36 am, "T.J. Crowder"
<tjcrow...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > > > @kangax -
>
> > > > > elements.shift().observe(''click'',
function(e) {
> > > > >   elements.invoke(''writeAttribute'',
''disabled'', e.target.checked);
>
> > > > That is just so...elegant.  Took me a while to figure it out
(missed
> > > > that part of the OP''s question) and *wow* would I
comment it, but
> > > > seriously:  Nice.
> > > > --
> > > > T.J. Crowder
> > > > tj / crowder software / com
>
> > > > On Apr 28, 12:23 am, kangax
<kan...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > > > > I''ll try to be careful this time.
>
> > > > > 1) Straight-forward way, only checks whether id starts
with a string:
> > > > > var elements =
$$(''input[type="checkbox"][id^="match_this_"]'');
>
> > > > > 2) A little more precise (based on regexp):
> > > > > var elements =
$$(''input[type="checkbox"]'').findAll(function(el)
> > > > > { return /^match_this_\d$/.test(el.id) });
>
> > > > > Then:
>
> > > > > elements.shift().observe(''click'',
function(e) {
> > > > >   elements.invoke(''writeAttribute'',
''disabled'', e.target.checked);
>
> > > > > })
>
> > > > > - kangax
>
> > > > > On Apr 27, 6:40 pm, zoopzoop
<manuel.meu...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > > > > > Hi!
>
> > > > > > I want to (as the topic suggests) get a list/array
of all elements on
> > > > > > a page whose id starts with a string using
Prototype.
> > > > > > For example, I have several checkboxes like this:
>
> > > > > > <input type="checkbox"
id="match_this_1">
> > > > > > <input type="checkbox"
id="match_this_2">
> > > > > > <input type="checkbox"
id="match_this_3">
> > > > > > <input type="checkbox"
id="match_this_4">
>
> > > > > > I want to find these elements on my page based on
the fact that their
> > > > > > ids start with "match_this".
> > > > > > Then I want to assign a onclick-function to the
first checkbox that
> > > > > > disables all the other ones.
> > > > > > Can somebody help me out with how to do this with
Prototype?
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---