Any way to get all records from a partial into a JavaScript array to test?

I have a partial called people that has a radio button called hoh for
head of household. I'm trying to have JavaScript look at each person
and find the one that has hoh=1. This record then has it's name copied
to another field used for mailings. The web page has each record from
the partial with a different id, household_person_1001,
household_person_1030, etc. I can't see a way to get all the person
records into a JavaScript array. Please help.

Bob <bsm2th@gmail.com>

I have a partial called people that has a radio button called hoh for
head of household. I'm trying to have JavaScript look at each person
and find the one that has hoh=1. This record then has it's name copied
to another field used for mailings. The web page has each record from
the partial with a different id, household_person_1001,
household_person_1030, etc. I can't see a way to get all the person
records into a JavaScript array. Please help.

Parts of this seem pretty easy, but there's one thing you didn't mention -- where are the names stored? Are these radio buttons set up with value="Bob Smith" or are they value="1030" (the ID)?

If you apply a classname to these radio buttons, then it's easy to grab all of them.

var hoh_chosen = $$('input.hoh:checked');

Now you have all of the checked radio buttons with class="hoh" applied to them. You iterate over them and find the nearby associated mailing field:

hoh_chosen.each(function(elm){
   // here I'm making another guess about your layout, that
   // you've added a div around the common inputs for each person, and
   // you've applied the classname mailing_name to that text field
   var mailing = elm.up('div').down('input.mailing_name');
   if(mailing){
     mailing.setValue(elm.getValue());
     // and that only works if the value of the radio is what you want
   }
});

So lots of assumptions here, but it's really quite terse to do with Prototype if the value is there to steal. But if your radio buttons only have the ID, then I wouldn't set the mailing name here, but in the controller after the form is submitted. There, you can look up the user by the ID chosen in your hoh radio, and it's all there for you.

Walter

The purpose of this button is to make it easy to change the way my app
stores names. The old way was with a first and last name for the whole
family, with the sex and birthdays of all family members later. Now
I'm trying to connect the names and birthdays, so any person in the
family that has their name listed can come in. The easiest way I've
come up with to move to the new way is with is a button that will copy
the name to whatever person has their radio button selected when the
button is pressed.

my radio buttons return the id number of a person record to a variable
- @households.hoh. Rails is handling this fine.
I'll need to add to the update method to copy the new name for the hoh
if the radio button was changed.

var hoh_chosen = $$('input.hoh:checked'); - when I try this, nothing
is selected, even with a radio button checked
I've tried surrounding the radio_button call with a <div class="hoh">
and <div id="hoh"> with no luck.
<%= radio_button "household", "hoh", person.id %>

To me, it looks like I'm either not setting the class name correctly,
or not looking for them right. Please help.

Bob

The purpose of this button is to make it easy to change the way my app
stores names. The old way was with a first and last name for the whole
family, with the sex and birthdays of all family members later. Now
I'm trying to connect the names and birthdays, so any person in the
family that has their name listed can come in. The easiest way I've
come up with to move to the new way is with is a button that will copy
the name to whatever person has their radio button selected when the
button is pressed.

my radio buttons return the id number of a person record to a variable
- @households.hoh. Rails is handling this fine.
I'll need to add to the update method to copy the new name for the hoh
if the radio button was changed.

var hoh_chosen = $$('input.hoh:checked'); - when I try this, nothing
is selected, even with a radio button checked
I've tried surrounding the radio_button call with a <div class="hoh">
and <div id="hoh"> with no luck.
<%= radio_button "household", "hoh", person.id %>

To me, it looks like I'm either not setting the class name correctly,
or not looking for them right. Please help.

You need to add the class to the radio button itself. The HTML you want to see in your browser looks like this:

<input type="radio" class="hoh" id="household_hoh_123" name="household_hoh" value="123" />

To add the class to the radio_button call, just add it in the options hash: :class => 'hoh'.

The reason that the JavaScript didn't give you back anything was because it didn't match anything. But there's a larger issue here. Where is the name located in the current page when you have that radio button selected? Is it in the label to the radio button, or elsewhere on the same page in a find-able location? Because the code I gave you earlier would only access the value of the found radio button, in this case 123. If it's in the label, then depending on whether it's before or after the radio, you could access it with elm.previous('label').innerHTML or elm.next('label').innerHTML

I can't help but think that it would be much easier to fix this in the controller, copy the chosen person (as a found object through AR) into the correct relationship and save.

Walter

The problem with putting this in the controller is that there isn't a
chosen person to add the name to until someone asks the
person which birthday is theirs from the list and selects the correct
radio_button.

The class in the radio button worked perfectly, but now the elm.down
statements are the new problem..

Here is my Javascript function
function move(){
  var hoh = $$('input.hoh:checked');
  hoh.each(function(elm){
    {
         elm.up('div').down('input.last_name').value = $
('household_last_name')
         elm.up('div').down('input.first_name').value = $
('household_first_name')
         elm.up('div').down('input.middle').value = $
('household_middle')
    }
  })
}

and the page source for these fields
<div id="person"><tr>
<td width=100><input checked="checked" class="hoh"
id="household_hoh_23" name="household[hoh]" type="radio" value="23" /

</td>

<td><input autocomplete="off"
id="household_people_attributes__last_name" maxlength="25"
name="household[people_attributes][][last_name]" size="25" style="text-
align: left" type="text" value="" /></td>
<td><input autocomplete="off"
id="household_people_attributes__first_name" maxlength="25"
name="household[people_attributes][][first_name]" size="25"
style="text-align: left" type="text" value="0" /></td>
<td><input autocomplete="off" id="household_people_attributes__middle"
maxlength="1" name="household[people_attributes][][middle]" size="1"
style="text-align: right" type="text" value="" /></td>
<td><input autocomplete="off" id="household_people_attributes__sex"
maxlength="1" name="household[people_attributes][][sex]" size="1"
style="text-align: right" type="text" value="F" /></td>
<td><input autocomplete="off" id="household_people_attributes__month_"
maxlength="2" name="household[people_attributes][][month_]" size="2"
style="text-align: right" type="text" value="11" /></td>

<td><input autocomplete="off" id="household_people_attributes__day_"
maxlength="2" name="household[people_attributes][][day_]" size="2"
style="text-align: right" type="text" value="8" /></td>
<td><input autocomplete="off" id="household_people_attributes__year_"
maxlength="4" name="household[people_attributes][][year_]" size="4"
style="text-align: right" type="text" value="1983" /></td>
<td>
  <input id="household_people_attributes__id"
name="household[people_attributes][][id]" type="hidden" value="23" />
  <a href="/people/23" onclick="if (confirm('Are you sure?')) { var f =
document.createElement('form'); f.style.display = 'none';
this.parentNode.appendChild(f); f.method = 'POST'; f.action =
this.href;var m = document.createElement('input');
m.setAttribute('type', 'hidden'); m.setAttribute('name', '_method');
m.setAttribute('value', 'delete'); f.appendChild(m);var s =
document.createElement('input'); s.setAttribute('type', 'hidden');
s.setAttribute('name', 'authenticity_token'); s.setAttribute('value',
'WlfISBcCORGbldrv7wfTkgazXI7eZBRdCQONY1TYNEc=');
f.appendChild(s);f.submit(); };return false;">Delete</a>

</td></tr></div>

it looks like I should replace 'last_name' in the Javascript function
with 'household_people_attributes__last_name', but that didn't help.
By the way, where can I learn these answers myself, instead of asking
endless questions. I didn't see anything about elm.up and elm.down
except a prototype page that showed how to move around an ordered
list.

By the way, thanks for all the help.

Bob

The problem with putting this in the controller is that there isn't a
chosen person to add the name to until someone asks the
person which birthday is theirs from the list and selects the correct
radio_button.

The class in the radio button worked perfectly, but now the elm.down
statements are the new problem..

Here is my Javascript function
function move(){
  var hoh = $$('input.hoh:checked');
  hoh.each(function(elm){
    {
        elm.up('div').down('input.last_name').value = $
('household_last_name')
        elm.up('div').down('input.first_name').value = $
('household_first_name')
        elm.up('div').down('input.middle').value = $
('household_middle')

This isn't how you set a value in Prototype, or how you get one.

If you have a form field with the ID 'household_last_name, you would use its value like this to set the field you grabbed from your DOM traversal with up() and down():

elm.up('div').down('input.last_name').setValue($F('household_last_name'));

$F() is a shortcut for Element.getValue('id');

But did you also apply a classname of last_name to the text field you are trying to populate with a value? If you didn't, then your down() would fail, since there was nothing that matched that CSS selector. If it fails, you then cannot set its value either, because you don't have a reference to the field.

Walter

By the way, this is what I ended up with..

  var hoh = $$('input.hoh:checked');
  hoh.each(function(elm){
    {
        elm.up(1).down('input.last_name').value =
$F('household_last_name')
         elm.up(1).down('input.first_name').value =
$F('household_first_name')
        elm.up(1).down('input.middle').value = $F('household_middle')
    }
  })
}

it turns out that there were a few partials, etc.. between the cells I
was after, so the up and down calls were useless. This just got the
values needed with $f and out them in local cells that I could access.

Bob

Excellent. Now one tiny refinement to recommend: replace value = val with setValue(val). It's just a little bit safer cross-browser.

Walter