Rails 4：动态添加的复选框未提交答案

【问题标题】：Rails 4: dynamically added checkboxes are not submittingRails 4：动态添加的复选框未提交
【发布时间】：2016-04-21 19:27:11
【问题描述】：

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

它工作正常，但当我创建一个新记录并想在不刷新页面的情况下删除它时就不行了。标头的响应是：“ActiveRecord::RecordNotFound in AccountsController#destroym”。就像我点击按钮而不检查我的复选框一样。

感谢您的帮助:)

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) %>");

【问题讨论】：

标签： javascript ruby-on-rails ajax activerecord

【解决方案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 请求。

【讨论】：

谢谢牧师。关于 1) ，我更喜欢那个解决方案。我已经用$("#accountsListing input:checked").closest("tr").fadeOut('slow'); 替换了destroym.js.erb 但是我仍然不能删除超过一次。谢谢
其实我现在看到控制台报错：ActiveRecord::RecordNotFound in AccountsController#destroym Couldn't find Account with 'id'=100100是我删除的第一个账号的id。就像我检查后的每个复选框都用第一个删除的 id 说明...
问题是您的fadeOut 将不会从 DOM 中删除元素。因此，每次您再次提交时，仍会发送其他复选框（尽管它们是“不可见的”）。
你可以给fadeOut提供一个回调函数，一旦元素淡出就会被调用。在您的情况下，您需要从 DOM 中完全删除该元素（另一个选项是取消选中该框）。
文，谢谢你的回答。真的帮助我前进并以正确的方式编辑代码。请在上面的主要帖子中查看我的编辑！我现在可以在第二次提交时销毁多行。但是当我动态添加新记录时仍然存在问题，我无法在创建后删除该记录。看起来我的表单提交无法识别所有动态添加的复选框。如果我想删除记录，我必须刷新页面...

【解决方案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
    },
    });
});

【讨论】：