Trying to use AJAX to delete a new record

I have some AJAX in my app which works fine to add new people to a list
shown on-screen. The problem comes if I try to delete one of the new
people. Once saved, there is no problem, as there is an id to delete
with. The problem comes when I try to remove a new person from the
screen. The closest I got was a div around all people and a remove of
that div. All the delete links ( one each person) would delete the first
item on the list..(of course since it only had the div holding
everything to use). I tried div_for and content_tag, but each needed an
id to work with..

Please help.. Thanks

some code..
people.html.erb

<b>People in Household</b>
<% @household.build_person unless @household.people %>
<table border=1>
  <th width=60 align=left>Sex</th><th width=60 align=left>Month</th><th
width=60 align=left>Day</th><th width=60 align=left>Year</th>
  <div id="people">
    <%= render :partial => 'person', :collection => @household.people %>
  </div>
  <%= link_to_function "Add a Person" do |page| page.insert_html :after,
:empty_row, :partial => 'new_person', :object => Person.new end %>
  <tr id="empty_row">

  </tr>
</table>

person.html.erb

< div id='person'>
<% fields_for "household[people_attributes][]", person do |person_form|
%>
<tr>
  <td><%= person_form.text_field :sex, :size => 1, :maxlength =>1,
:index => nil, :autocomplete => "off" %></td>
  <td><%= person_form.text_field :month_, :size => 2, :maxlength =>2,
:index => nil, :autocomplete => "off" %></td>
  <td><%= person_form.text_field :day_, :size => 2, :maxlength =>2,
:index => nil, :autocomplete => "off" %></td>
  <td><%= person_form.text_field :year_, :size => 4, :maxlength =>4,
:index => nil, :autocomplete => "off" %></td>
    <% unless person_form.object.new_record? %>
    <td>
    <%= person_form.hidden_field :id, :index => nil %>
    <%= link_to 'Delete', household_person_path(@household, person),
:confirm => 'Are you sure?', :method => :delete %></td>
  <% end %>
</tr>
<% end %>

new_person.html.erb

<% div_for (person, :class => "person") do %>
<% fields_for "household[people_attributes][]", new_person do

person_form| %>

<tr>
  <td><%= person_form.text_field :sex, :size => 1, :maxlength =>1,
:index => nil, :autocomplete => "off" %></td>
  <td><%= person_form.text_field :month_, :size => 2, :maxlength =>2,
:index => nil, :autocomplete => "off" %></td>
  <td><%= person_form.text_field :day_, :size => 2, :maxlength =>2,
:index => nil, :autocomplete => "off" %></td>
  <td><%= person_form.text_field :year_, :size => 4, :maxlength =>4,
:index => nil, :autocomplete => "off" %></td>
  <td><%= link_to_function "Delete", "$('new_person').remove();" %></td>
</tr>
<% end %><% end %>

Hi Bob,

Bill Walton wrote:

Hi Bob,

I have some AJAX in my app which works fine to add new people to a list
shown on-screen. The problem comes if I try to delete one of the new
people. Once saved, there is no problem, as there is an id to delete
with. The problem comes when I try to remove a new person from the
screen. The closest I got was a div around all people and a remove of
that div. All the delete links ( one each person) would delete the first
item on the list..(of course since it only had the div holding
everything to use). I tried div_for and content_tag, but each needed an
id to work with..

At a minimum, you're going to have to put unique IDs on the person
<div>s to be able to target them with javascript.

HTH,
Bill

That is what I was hoping div_for would do, but I don't know how to tell
the button what unique string div_for invented for this row.

You have to supply the id. The 'easiest' thing to do would probably
be to have the destroy or cancel button submit via ajax to the destroy
method and, if there's no id, simply re-render your partial to display
the 'saved' household members. If I understand your code correctly,
the problem you're having results from trying to do too much via js in
the new method. I'd recommend a 'save' button on new people.

HTH,
Bill

Take a look at Railscasts #197, I think it might help you find a
solution to your problem.