Rails 4:动态添加的复选框未提交

Rails 4: dynamically added checkboxes are not submitting

本文关键字：复选框 提交 添加 动态 Rails      更新时间：2023-09-26

我开始学习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>

索引.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();

创建.js.erb

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

在这种情况下，问题是您要替换整个页面的 HTML...因此，绑定到元素的所有 DOM 事件也会被销毁。

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

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

您有以下几种选择：

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

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

3）您可以"自动"重新加载页面（您将失去AJaX的好处）。

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

我处理动态创建的复选框的解决方案。如果要处理动态添加的元素上的事件，则 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
    },
    });
});
相关文章：