Question

I’m looking for the most Rails-y way to create a table that displays data elements, such that when the user clicks on any of the rows, that row becomes editable. What I’ve got so far:

1. Each row in the table is rendered by a partial

2. I bind a jQuery event handler to the click event on the row, which uses jQuery.load to load the HTML for the edit partial into the row

This almost works, with the following code:

tasks.js

$(document).ready(function() {
    $('.task_row').click( function() {
        var id = $(this).attr('id');
        $('#' + id).load('/tasks/' + id + '/edit');
        //$(this).unbind('click');
    });
});

_edit_row.html.erb

<%= form_for(task, :remote => true) do |f| %>
  <td>
    <%= f.text_field :title %>
  </td>
  <td>
    <%= f.text_field(:due_date_string, :value => format_time(f.object.due_date)) %>
  </td>
  <td>
    <%= f.text_field(:tag_string) %>
  </td>
  <td>
    <%= f.submit %>
  </td>  
  <td>
    <%= link_to 'Delete', task, :confirm => 'Are you sure?', :method => :delete %>
  </td>
<% end %>

The problem is that the form doesn’t submit. On clicking the f.submit button (‘Update’), nothing happens – no JS errors, no request made to the server.

This might be entirely the wrong approach for this kind of thing. Initially I thought to do the entire thing using javascript, manually reading the values and making the jQuery ajax call to the update method on my Rails controller, but I thought there might be a more straightforward way to do it. Any suggestions?

Answer 1

I’ve found that the easiest way to do this is, as you suggested, to do all of the editing in javascript, and to then make an ajax call to update the server.

I prefer the jQuery DataTables plugin – http://datatables.net/ paired with jEditable (see http://www.datatables.net/examples/api/editable.html) but there are other good plugins out there too if DataTables doesn’t float your boat.