Question

我有一个标准 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>

我需要通过AJAX实现所有CRUD操作。没有想法如何处理它。我添加了在我的表单中，但是当用户点击新付款或修改按钮时，我需要以某种方式在index.html.erb上呈现我的_form。

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

我通过创建 destroy.js.erb

来实施AJAX for destroy action

$('.delete_payment').bind('ajax:success', function() {  
        $(this).closest('tr').fadeOut();
});

Answer 1

我将向您描述整体方法，并希望您实施的细节在您实施时有意义。让我们从破坏开始，因为这是最简单的。

添加remote：true到链接，那就完美了。
创建使用此删除请求的控制器操作（payments_controller） 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中都有一个与之关联的ID
将您的destroy.js.erb更改为 $(document).ready(function(){ $('tr#payment_<%= @payment.id %>').fadeOut('slow'); });

一旦你破坏了工作，创建和编辑就会采用相同的方法。其中create添加TR，编辑用旧TR替换旧TR。

希望这会有所帮助

Answer 2

最后我创建了两个文件 new.js.erb （隐藏我的＆＃39;新付款＆＃39;按钮和展示表单）

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

create.js.erb （隐藏表单和显示按钮）

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

现在我可以通过表单添加项目，但仍然不知道如何刷新表格：仍然需要重新加载页面到新的付款显示在表格中。

如何在Rails上使用AJAX CRUD？

2 个答案: