Checkboxes, Rails, and Javascript

Hi there,

I’m trying to create a check all / uncheck all function for a series of check boxes. Seems easy, but for some reason the brackets used in the check_box_tag don’t play well with javascript functions

Here’s a real basic example of what I’m trying to do:

View:

<%= form_tag({:action => “delete_contact_add_campaign”}, {:method => :post, :name => “contact_list”}) %>

<% for contact in @contacts %>
<%= check_box_tag(‘delete_contact[]’, contact.id) -%>
<%= check_box_tag(‘add_to_group[]’,
contact.id
) -%>
<% end %>
<%= submit_tag ‘Add to Group’, :name => ‘add_to_group’ %>
<%= submit_tag ‘Delete from list’, :name => ‘delete_selected_contacts’ %>
<%= end_form_tag %>

I’ve tried javascript syntax like:
Check All

Uncheck All

…but that won’t check any of the boxes. If I remove the brackets from the check_box_tag for delete_contact and add_to_group all the check boxes get checked, but then I don’t get the array of ids in params[‘delete_contact’] or params[‘add_to_group’]

Does anyone have any ideas on how to solve this?

Thank you,
Dave Hoefler

View:

I admit I didn’t take the time to fully analyze your problem just noticed one thing, you’re not closing the function brackets. Should be:

Again…no deep analysis so this may not be the only problem, but it is a problem.

good luck,
andy

Thanks Andy. Unfortunately that didn’t do it. :frowning:

Here’s the exact javascript error if it may help.

Error: syntax error
Source File: http://localhost:3000/contacts/list

Line: 1, Column: 46
Source Code: checkAll(document.contact_list.delete_contact[]);return false;

When I remove the brackets the check boxes get checked but I lose the array of ids.
<%= check_box_tag(‘delete_contact’, contact.id) -%>
Check All

-Dave

Dave Hoefler wrote:

Thanks Andy. Unfortunately that didn't do it. :frowning:

Here's the exact javascript error if it may help.

Error: syntax error
Source File: http://localhost:3000/contacts/list
Line: 1, Column: 46
Source Code: checkAll(document.contact_list.delete_contact[]);return false;

When I remove the brackets the check boxes get checked but I lose the array
of ids.
<%= check_box_tag('delete_contact', contact.id) -%>
<a href="#" onClick="checkAll(document.contact_list.delete_contact);return
false;" >Check All</a>

-Dave

>
>
> View:
> > <script type="text/javascript">
> > function checkAll(field) {
> > for (var i = 0; i < field.length; i++)
> > field[i].checked = true ;}
> >
> > function uncheckAll(field) {
> > for (var i = 0; i < field.length; i++)
> > field[i].checked = false ;}
> > </script>
> >
> >
> I admit I didn't take the time to fully analyze your problem just noticed
> one thing, you're not closing the function brackets. Should be:
>
> <script type="text/javascript">
> function checkAll(field) {
> for (var i = 0; i < field.length; i++){
> field[i].checked = true ;
> }
> }
>
> function uncheckAll(field) {
> for (var i = 0; i < field.length; i++){
> field[i].checked = false ;
> }
> }
> </script>
>
> Again...no deep analysis so this may not be the only problem, but it is a
> problem.
>
> good luck,
> andy
> --
> Andrew Stone
> >
>

I use these functions...

function toggleAll(name)
{
  boxes = document.getElementsByClassName(name);
  for (i = 0; i < boxes.length; i++)
    if (!boxes[i].disabled)
       { boxes[i].checked = !boxes[i].checked ; }
}

function setAll(name,state)
{
  boxes = document.getElementsByClassName(name);
  for (i = 0; i < boxes.length; i++)
    if (!boxes[i].disabled)
       { boxes[i].checked = state ; }
}

Pretty sure these will work with controls that have '[]' in their
names.

_Kevin

Hi Kevin,

Forgive me for the javascript noob question. Your toggleAll(name) function is probably what I should be using. I tried using it and I still get a syntax error:

Error: syntax error
Source File:
http://localhost:3000/contacts/list

Line: 1, Column: 47
Source Code: toggleAll(document.contact_list.delete_contact[])

Maybe I’m not calling the function correctly.

-Dave

Dave Hoefler wrote:

Hi Kevin,

Forgive me for the javascript noob question. Your toggleAll(name) function
is probably what I should be using. I tried using it and I still get a
syntax error:

Error: syntax error
Source File: http://localhost:3000/contacts/list
Line: 1, Column: 47
Source Code: toggleAll(document.contact_list.delete_contact[])

<input type="button" name="CheckAll" value="Check / Uncheck all"
onClick="toggleAll(document.contact_list.delete_contact[])">

Maybe I'm not calling the function correctly.

-Dave

>
>
>
> Dave Hoefler wrote:
> > Thanks Andy. Unfortunately that didn't do it. :frowning:
> >
> > Here's the exact javascript error if it may help.
> >
> > Error: syntax error
> > Source File: http://localhost:3000/contacts/list
> > Line: 1, Column: 46
> > Source Code: checkAll(document.contact_list.delete_contact[]);return
> false;
> >
> >
> >
> > When I remove the brackets the check boxes get checked but I lose the
> array
> > of ids.
> > <%= check_box_tag('delete_contact', contact.id) -%>
> > <a href="#" onClick="checkAll(document.contact_list.delete_contact
> );return
> > false;" >Check All</a>
> >
> >
> > -Dave
> >
> > >
> > >
> > > View:
> > > > <script type="text/javascript">
> > > > function checkAll(field) {
> > > > for (var i = 0; i < field.length; i++)
> > > > field[i].checked = true ;}
> > > >
> > > > function uncheckAll(field) {
> > > > for (var i = 0; i < field.length; i++)
> > > > field[i].checked = false ;}
> > > > </script>
> > > >
> > > >
> > > I admit I didn't take the time to fully analyze your problem just
> noticed
> > > one thing, you're not closing the function brackets. Should be:
> > >
> > > <script type="text/javascript">
> > > function checkAll(field) {
> > > for (var i = 0; i < field.length; i++){
> > > field[i].checked = true ;
> > > }
> > > }
> > >
> > > function uncheckAll(field) {
> > > for (var i = 0; i < field.length; i++){
> > > field[i].checked = false ;
> > > }
> > > }
> > > </script>
> > >
> > > Again...no deep analysis so this may not be the only problem, but it
> is a
> > > problem.
> > >
> > > good luck,
> > > andy
> > > --
> > > Andrew Stone
> > > >
> > >
> >
>
> I use these functions...
>
> function toggleAll(name)
> {
> boxes = document.getElementsByClassName(name);
> for (i = 0; i < boxes.length; i++)
> if (!boxes[i].disabled)
> { boxes[i].checked = !boxes[i].checked ; }
> }
>
> function setAll(name,state)
> {
> boxes = document.getElementsByClassName(name);
> for (i = 0; i < boxes.length; i++)
> if (!boxes[i].disabled)
> { boxes[i].checked = state ; }
> }
>
> Pretty sure these will work with controls that have '[]' in their
> names.
>
> _Kevin
>
>
> >
>

This goes in the header for the collection...

<%= check_box_tag 'toggle' , 'toggle', false, :onclick =>
"toggleAll('select');return false;"%>

In my partials, I include this...

<%= check_box_tag("sample[]", sample.id, false, :class=>'select') %>

Note the name of the checkbox is irrelevant. It finds all the
checkboxes with the 'select' class applied.

This is particularly handy if you have a grid of check boxes and you
want to have a checkbox toggle all of one row or column.

_Kevin

Thank you Kevin! That works perfect!

-Dave

Dave Hoefler wrote:

Source Code: checkAll(document.contact_list.delete_contact[]);return false;

JavaScript syntax says that you're trying to treat delete_contact as an
object and look up the property with the name ...oops, you didn't
supply a name. Hence the error.

In JavaScript, as in Lua, you can reference any property of any object
in two ways:
1) Using standard 'dot' notation, as you have above:
alert( foo.bar );

2) Using bracket notation (as the system thought you were trying to
do):
alert( foo[ "bar" ] );

This latter method is useful when you have the name of the property you
want stored in another variable:
var prop = "bar";
alert( foo[ prop ] );
or (as in your case) when the name of the property is not a valid
JavaScript identifier:
checkAll( document.contact_list[ "delete_contact[]" ] );

Dave Hoefler wrote:

<a href="#" onClick="checkAll(document.contact_list.delete_contact);return
false;" >Check All</a><br />
<a href="#" onClick="uncheckAll(document.contact_list.delete_contact);return
false;" >Uncheck All</a>

Don't (ab)use HTML anchors to invoke JavaScript functions. Use buttons,
or style text yourself. Anchors are for hyperlinks.

This is somewhat off topic for the rails list, so for more discussion
on this topic, feel free to email me directly.

Phrogz wrote:

Don't (ab)use HTML anchors to invoke JavaScript functions. Use buttons,
or style text yourself. Anchors are for hyperlinks.

A bit more information:
http://tom.me.uk/scripting/links.html