What is the correct way to use Ajax for editing table rows?

Question

I looked through a number of posts with similar titles but have not found an answer.

In my application I want to allow editing Active records from an index view. This view uses link_to_remote for each row. When user presses the link the row should be replaced with a form that user may submit via Ajax.

Table is displayed by sending a collection to show_item partial

<% content_tag_for(:tr, show_item) do %>
<td><%=h show_item.name %> </td>
<td><%= show_item.role %></td>
<td><%= link_to_remote 'Edit', :url => edit_participation_path(show_item), :method => :get %> </td>
<% end %>

My controller implements editing as

   def edit
     @participation = Participation.find(params[:id])
     respond_to do |format|
       format.js do
         render(:update) { |page| page[@participation].replace_html(:partial => "edit_item", :object => @participation ) }
       end
     end
    end

Edit_item partial looks like

<% content_tag_for(:tr, edit_item) do %>
  <% form_remote_for edit_item do |f| %>
     <td><%= edit_item.name %></td>
     <td> <%= f.select(:role, options_for_select(all_roles, edit_item.role)) %> </td>
     <td><%= submit_tag 'Update', :class => 'submit' %></td>
     <td><%= link_to_remote 'Cancel', :url => participation_path(edit_item) %></td>
   <% end %>
 <% end %>

Remote calls do go through but they affect the table in an unexpected way. In Firefox pressing the link causes the row to disappear. On the other hand if I use Safari the row is updated but instead of aligning cells with other table rows the entire replaced row is placed to the left of other rows.

Any ideas?

Answer 1

First thing that comes to mind is a syntax error in the html. I notice you have 4 td tags in your edit partial, but only 3 in the show partial. You may want to view the generated source from Firebug and validate it.

Answer 2

Are you using any template? when you use link_to_remote it loads the result with a template if you are using one.

Check the source code using firebug addon and confirm if the code in the result is exactly what you want.