Как работать с AJAX CRUD на Rails?

0

У меня есть стандартный index.html.erb

<table class="table" id="payments">
  <thead>
    <tr>
      <th>Time</th>
      <th>Description</th>
      <th>Amount</th>
      <th>Comment</th>
      <th>Show</th>
      <th>Edit</th>
      <th>Destroy</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @payments.each do |payment| %>
      <tr>
        <td><%= payment.time.strftime("%Y-%m-%d %H:%M:%S") %></td>
        <td><%= payment.description %></td>
        <td><%= payment.amount %></td>
        <td><%= payment.comment %></td>
        <td><%= link_to 'Show', payment %></td>
        <td><%= link_to 'Edit', edit_payment_path(payment) %></td>
        <td><%= link_to 'Destroy', payment, method: :delete, remote: true, data: { confirm: 'Are you sure?' }, class: "delete_payment" %></td>
      </tr>
    <% end %>
  </tbody>
</table>
<%= link_to 'New Payment', new_payment_path %></br></br>

Мне нужно реализовать все действия CRUD через AJAX. Нет мысли, как с этим бороться. Я добавил в свою форму, но мне нужно как-то визуализировать мою _form на index.html.erb, когда пользователь нажимает кнопки " Новый платеж" или " Изменить".

<%= form_for(payment, remote: true) do |f| %>

Я реализовал AJAX для уничтожения действий, создав destroy.js.erb

$('.delete_payment').bind('ajax:success', function() {  
        $(this).closest('tr').fadeOut();
});
  • 0
    Вы добавили remote: true в какой форме? Я вижу, что вы добавили его в свой link_to 'Destroy' ... All remote: true делает, говорит вашему действию уничтожения, чтобы визуализировать шаблон javascript как ответ, а не как HTML-ответ. Таким образом, в app/views/payments/ destroy.js.erb app/views/payments/ вы бы добавили destroy.js.erb и поместили туда код javascript.
  • 0
    @BigRon отредактировано.
Теги:

2 ответа

1
Лучший ответ

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

  1. добавьте remote: true для ссылки, thats perfect.
  2. создайте действие контроллера, которое потребляет этот запрос на удаление (def destroy @payment = Payment.find params[:id] if @payment.destroy render 'destroy' end end) def destroy @payment = Payment.find params[:id] if @payment.destroy render 'destroy' end end
  3. создать представление в views/payments/ называется destroy.js.erb
  4. в исходном представлении индекса добавьте <tr id='payment_<%= payment.id %>'> определение в tr, так что каждая строка имеет идентификатор в dom, который ассоциируется с
  5. измените ваш файл destroy.js.erb на $(document).ready(function(){ $('tr#payment_<%= @payment.id %>').fadeOut('slow'); });

после того, как вы разрушите работу, создайте и отредактируйте тот же подход. Когда create добавляет TR, а edit заменяет старый TR новым TR.

надеюсь это поможет

Поделиться
  • 0
    У меня вопрос: как я могу работать с моим _form.html.erb? Мне нужно, чтобы он появился на index.html.erb
  • 0
    ваш вызов create отрендерит 'create', который отображает /views/payments/create.js.erb, теперь в вашем create.js.erb отрисовывается часть 'form', которая находится в том же каталоге, и заполняет ее данными. затем используйте JavaScript, чтобы вывести результат этого в DOM
Показать ещё 4 комментария
0

Наконец, я создал два файла new.js.erb (который скрывает мою кнопку "Новый платеж" и показывает форму)

$("#new_payment_btn").hide().after('<%= j render("form") %>');

create.js.erb (который скрывает форму и кнопку show)

$("#new_payment").remove();
$("#new_payment_btn").show();

Теперь я могу добавлять элементы через форму, но до сих пор не знаю, как обновить таблицу: по-прежнему нужно перезагрузить страницу, чтобы новые платежи отображались в таблице.

Поделиться
  • 0
    таким образом, лучший способ обновить всю таблицу - это действительно полное перенаправление (которое перерисовывается). Вы не должны делать это, хотя - помещая определение таблицы в частичное и передавая его в dom из файла create.js.erb. (вы также можете отобразить его в index.html.erb, чтобы избежать дублирования, достойный подход)
  • 0
    Я создал там частичную и вставленную таблицу, затем в create.js.erb я вызываю $ ('body'). Append ("<% = j render (: частичный => 'payment_table')%>"); и в index.html.erb я написал <% = render 'payment_table'%>, и он продублирован.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню