Topic: Form elements added via AJAX don't submit

Hi! I have learned a lot from reading others questions here, but now I'm stumped.

I have a form that roughly follows the RyanB tutorial for variable number of model submission via ajax.  My problem is as follows.

The any "ads" created by the new controller will submit and save fine.  Any added via ajax will not even be present in the params of the submission.

Relevant controllers

  def new
    @company = Company.new
    @contract = @company.contracts.build
    @ad = @contract.ads.build
   
  end
  def add_ad
      @ad = Ad.new
  end

Relevant new.rhtml
<div class="ads">
     <table class="edit_ads" id="ad_area">
     <% @contract.ads.each_with_index do |ad, index| %>
          <%= render :partial => 'ad_fields', :locals => { :ad => ad, :index => index, :parent_id => @contract.id } %>
     <% end %>
     <% reset_cycle('row_class') %>
     </table>
     <%= render :partial => 'add_ad_link', :locals => { :index => @contract.ads.size, :parent_id => @contract.id } %>
</div>

and the add_ad_link rjs
page.insert_html :bottom, 'ad_area', :partial => 'ad_fields', :locals => { :ad => @ad, :index => params[:index], :parent_id => @parent_id }

page.replace 'add_ad_link', :partial => 'add_ad_link', :locals => { :index => (params[:index].to_i + 1) }


Relevant ad_fields partial
<% fields_for "ads[#{index}]", ad do |f| %>
<tbody id="ad_<%= index %>" class="<%= cycle('trwhite', 'trbackground', :name => 'row_class') %>">
   
    <tr class="editadstoprow">
        <th></th>
        <th>BOOK</th>
        <th>UDAC</th>
        <th>RATE</th>
        <th>HEADING</th>
        <th>STATUS</th>
    </tr>
   
    <tr>
        <th><%= f.hidden_field :contract_id, :value => @parent_id %></th>
        <td><%= f.collection_select :book_id, Book.find(:all), :id, :location %></td>
        <td><%= f.collection_select :udac_id, Udac.find(:all), :id, :udac %></td>
        <td><%= f.text_field :rate %></td>
        <td class="heading_id"><%= f.collection_select :heading_id, Heading.find(:all), :id, :heading %></td>
        <td><%= f.select :status, Ad::Statuses %></td>
        <%# throwerrornowplzkthx %>
    </tr>
    <tr>
        <th></th>
        <td colspan="5">
            <div class="adsheader">Sort By:</div><div class="sortby"><%= f.text_field :sortby %></div>
            <div class="adsheader">Artist:</div><div class="artist"><%= f.text_field :artist %></div>
            <div class="adsheader">History:</div><div class="history"><%= f.text_field :history %></div>               
        </td>
    </tr>
    <% @ad = ad %>
    <tr><td colspan="6"><%= link_to_remote 'remove', :url => { :action => 'remove_ad', :index => index } %><%= error_messages_for :ad %></td></tr>
</tbody>
<% end %>

Everything works except the ads that are added to the form via the "add_ad_link"
(add_ad is really starting to sound like a bad naming scheme...)

Maybe someone will have fresh eyes or see my obvious mistake...
Thanks for looking!

Re: Form elements added via AJAX don't submit

Have a look in the development log to check what the browser is actually submitting to the server. My thought is that the added form elements names are incorrect or not formatted properly ... check the generated HTML for the forms (Firebug will help if you're not already a convert) and confirm the submitted data.

Toby Hede
===================================================
FiniteStateMachine - Software Development for Social Networks
===================================================

Re: Form elements added via AJAX don't submit

thanks, but i've already checked all that.

the dev log only shows the first element (added by the new controller) the params never shows the additional items.

I've checked the elements via the dom inspector and they appear to be formed correctly. (verified again the working model added by the controller, in fact if i user 2.times.do the elements are identical to what the rjs generates. unless of course im missing something)

the problem is that the added elements are not even submitted.
im going to run at it again tomorrow, probably constructing a new app for testing purposes.
i must be missing something in the details...

Re: Form elements added via AJAX don't submit

found my problem.

It had to do with the placement of the form_for tag.

It used to look like this

<div>
  FORM_FOR TAG
  inputs for company...
</div>
<div>
  inputs for contract
  <div>
    inputs for ads
    things added via ajax would go here
  </div>
</div>
END FORM_FOR

I changed to this, and suddenly it works perfectly. 
FORM_FOR TAG
<div>

  inputs for company...
</div>
<div>
  inputs for contract
  <div>
    inputs for ads
    things added via ajax would go here
  </div>
</div>
END FORM_FOR


Im guessing what I had was technically malformed HTML...