Topic: Ajax table and form layout issue

Hi,

I'm trying to make an AJAX-enabled editable table. The idea is that at the end of each row is an edit button. When it's pressed the elements in the row become editable. To complicate the issue some additional elements will need to be shown below the existing element, and possibly some error messages.

My preferred way of doing this would be:

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Control</th>
  </tr>

<div id="id-<%= row-object.id %>">
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <%= link_to_remote 'Edit', :update => "myId", :url => {:action => "edit"} %>
  </tr>
</div>
</table>


And then I'd have a partial that would render the following inside the div tag

<% form_remote_tag :url => {:action => "update", :id => @row-object.id},
                     :update => { :success => "id-#{@row-object.id}",
                                  :failure => "id-#{@row-object.id}"},
                     :complete => visual_effect(:highlight, "id-#{@row-object.id}") do -%>

<tr>
  <td><%= text_field 'row-object', 'column1', {"size" => 20} %></td>
  <td><%= text_field 'row-object', 'column1', {"size" => 20} %></td>
  <td><%= submit_tag "Save Changes" %></td>
</tr>

<tr>
  <td colspan="3">
    .. Additional fields ...
    <%= error_messages_for 'row-object' %>
    <%if flash[:error] %><div class="error"><%= flash[:error] %></div><% end -%>
  </td>
</tr>


But unfortunately placing the divs outside of the tr's means this doesn't work. In Firefox the DIVs are rendered ahead of the table, and IE displays nothing.

Hmm.. So the next thought is to place the id field in the TR tag. This causes a number of knock on problems. Firstly I only have one table row now - I have nowhere to put the error messages and the additional fields.

More crucically this format renders nothing in Firefox:

<table>
  <tr id="xxxx">
    <form>
      <td>...</td>
      <td>...</td>
    </form>
  </tr>
</table>

So I'm reduced to doing this:

<table>
  <tr id="xxxx">
    <td colspan="3">
       <form>
       ...
       </form>
    </td>
  </tr>
</table>

Which of course means that the form objects can't line up with the table column headings.

Can anyone see anyway to get the layout I want?

Sam

Re: Ajax table and form layout issue

How about placing the form tags around the entire table initially? You can then use submit_to_remote in your row so you can control the AJAX action that gets called when the row edit submits.

Railscasts - Free Ruby on Rails Screencasts

Re: Ajax table and form layout issue

ryanb wrote:

How about placing the form tags around the entire table initially? You can then use submit_to_remote in your row so you can control the AJAX action that gets called when the row edit submits.

Thanks for the reply. smile

It's an interesting approach. It would mean that only one row could be edited at a time (or they'd be fields with the same name), but that's not neccessarily a bad thing, just a little extra code.

Of course, I'd still be limited to having only one table row per editable area, which would make no place to display the extra form fields and errors messages. I guess I could work around that by having an extra table row, that's normally hidden, that could expand out to hold these elements.

Food for thought, certainly.