У меня есть стандартный 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();
});
я опишу общий подход к вам, и, надеюсь, специфика вашей реализации будет иметь смысл при реализации. позволяет начать с уничтожения, поскольку это самый простой.
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
views/payments/
называется destroy.js.erb
<tr id='payment_<%= payment.id %>'>
определение в tr, так что каждая строка имеет идентификатор в dom, который ассоциируется с$(document).ready(function(){ $('tr#payment_<%= @payment.id %>').fadeOut('slow'); });
после того, как вы разрушите работу, создайте и отредактируйте тот же подход. Когда create добавляет TR, а edit заменяет старый TR новым TR.
надеюсь это поможет
Наконец, я создал два файла new.js.erb (который скрывает мою кнопку "Новый платеж" и показывает форму)
$("#new_payment_btn").hide().after('<%= j render("form") %>');
create.js.erb (который скрывает форму и кнопку show)
$("#new_payment").remove();
$("#new_payment_btn").show();
Теперь я могу добавлять элементы через форму, но до сих пор не знаю, как обновить таблицу: по-прежнему нужно перезагрузить страницу, чтобы новые платежи отображались в таблице.
remote: true
в какой форме? Я вижу, что вы добавили его в свойlink_to 'Destroy'
... Allremote: true
делает, говорит вашему действию уничтожения, чтобы визуализировать шаблон javascript как ответ, а не как HTML-ответ. Таким образом, вapp/views/payments/
destroy.js.erb
app/views/payments/
вы бы добавилиdestroy.js.erb
и поместили туда код javascript.