Встроенное редактирование по щелчку, Rails 3.0 / jQuery AJAX

#jquery #ajax #ruby-on-rails-3

#jquery #ajax #ruby-on-rails-3

Вопрос:

Я ищу наиболее подходящий для Rails способ создания таблицы, в которой отображаются элементы данных, так что, когда пользователь нажимает на любую из строк, эта строка становится доступной для редактирования. Что у меня есть до сих пор:

  1. Каждая строка в таблице отображается с помощью частичного
  2. Я привязываю обработчик события jQuery к событию click в строке, который использует jQuery.загрузить, чтобы загрузить HTML-код для части редактирования в строку

Это почти работает со следующим кодом:

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 %>
 

Проблема в том, что форма не отправляется. При нажатии кнопки f.submit (‘Обновить’) ничего не происходит — никаких ошибок JS, никаких запросов на сервер.

Это может быть совершенно неправильным подходом для такого рода вещей. Изначально я думал сделать все это с помощью javascript, вручную считывая значения и вызывая jQuery ajax для метода update на моем контроллере Rails, но я подумал, что может быть более простой способ сделать это. Есть предложения?

Ответ №1:

Я обнаружил, что самый простой способ сделать это, как вы предложили, выполнить все редактирование в javascript, а затем выполнить вызов ajax для обновления сервера.

Я предпочитаю плагин jQuery DataTables — http://datatables.net / в паре с jEditable (см. http://www.datatables.net/examples/api/editable.html ) но есть и другие хорошие плагины, если DataTables не поддерживает вашу лодку.