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

Bob_Smith · July 20, 2011, 5:07am

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>

walterdavis · July 20, 2011, 1:44pm

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

Bob_Smith · July 22, 2011, 7:25am

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

walterdavis · July 22, 2011, 11:05am

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:

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

Bob_Smith · July 23, 2011, 6:33am

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__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

walterdavis · July 24, 2011, 12:12am

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

Bob_Smith · August 25, 2011, 4:26am

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

walterdavis · August 25, 2011, 12:47pm

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

Walter