Question

我开始学习Rails并尝试将AJAX应用于在列表中动态添加的一些记录。然后我想删除直接在列表中通过复选框选择的多个记录。

它工作正常，但是当我创建新记录并想要删除它而不刷新页面时。标题的响应是：“AccountsController＃destroym中的ActiveRecord :: RecordNotFound”。它就好像我点击了按钮而没有勾选我的复选框。

感谢您的帮助：）

accounts_controller.rb

def destroym
  Account.destroy(params[:delete])
  respond_to do |format|
    format.html {redirect_to accounts_path}
    format.js #render accounts/destroym.js.erb
  end
end

_row.html.erb

<% @data = Account.find(id) %>
<tr id='tr<%= @data.id %>'> 
<td><%= @data.id %></td> 
<td><%= @data.login %></td>
<td><%= check_box_tag 'delete[]', @data.id  %></td>
</tr>

index.html.erb

<table class="table table-striped table-hover " id="accountsListing">
              <%= form_tag destroym_accounts_path, method: :DELETE, remote: true, id: "deleteForm" do %>
                <thead>
                  <tr>
                    <th>#</th>
                    <th>Username</th>
                    <th>Password</th>
                    <th>Website</th>
                    <th>Date</th>
                    <th>Editer</th>
                    <th><%= submit_tag "delete" %>
                    <%= link_to "Delete", '', :onclick => "$('#deleteForm').submit()", id: "removePwd", class: "text-danger", remote: true, method: :DELETE %> </th>
                  </tr>
                </thead>
                <tbody>
                <% @accounts.each do |account| %>
                  <%= render 'row', id: account.id %>
                <% end %>
                </tbody>
              <% end %>
            </table>

destroym.js.erb

$("#accountsListing input:checked").closest("tr").remove();

create.js.erb

$("#accountsListing tr:first").after("<%= escape_javascript (render 'row', id:@account.id) %>");

Answer 1

这种情况下的问题是你要替换整个页面的HTML ...所以，绑定到你元素的所有DOM事件也会被破坏。

当你替换你的html（.js.erb文件）时，Rails会为你的元素提供一些特殊属性（Rails调用"unobstrusive JavaScript"，因为你的元素中没有直接的JS代码。）

当然，这里的问题是Rails使用的JS代码（请参阅我的链接）仅在页面启动时应用。

您有多种选择：

1）您的destroy.js.erb只能删除您刚刚删除的确切行（而不是替换所有行）。

2）你可以自己调用rails-ujs的代码。这是一个黑客，不应该认真考虑。

3）你可以“自动”重新加载页面（你失去了AJaX的好处）。

4）您可以编写自己的JS代码来发送AJaX请求。

Answer 2

我的解决方案来处理动态创建的复选框。如果要处理动态添加的元素上的事件， on 函数是必需的。

JS代码

$("#deleteBtn").on("click", function() {

    var ids = [];
    $('#accountsListing :checkbox:checked').each(function(){
        ids.push($(this).val());
     });

    $.ajax({
    url: '/accounts/destroym',
    type: 'POST',
    data: {
        "_method":"DELETE",
        "authenticity_token": window._token,
        "delete[]": ids
    },
    });
});

Rails 4：动态添加的复选框没有提交

2 个答案: