Rails 4: динамически добавленные флажки не отправляются

Question

Я начал изучать Rails и попытался применить AJAX с некоторыми записями, которые динамически добавляются в список. Затем я хочу удалить несколько записей, которые выбраны с помощью флажков непосредственно в списке.

Он работает нормально, но не тогда, когда я создаю новую запись и хочу ее удалить, не обновляя страницу. Ответ заголовка: «ActiveRecord :: RecordNotFound в 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) %>"); 

Answer 1

Проблема в этом случае заключается в том, что вы заменяете HTML всей своей страницы ... Таким образом, все события DOM, связанные с вашими элементами, также уничтожаются.

Когда вы заменяете свой html (файл .js.erb), Rails предоставит вам некоторые специальные атрибуты (Rails вызывает это "unobstrusive JavaScript", потому что в ваших элементах нет JS-кода).

Проблема здесь, конечно, в том, что код JS, используемый Rails (см. Мою ссылку), применяется только при запуске страницы.

У вас есть несколько вариантов:

1) Ваш destroy.js.erb можно удалить только точную строку, которую вы только что удалили (вместо того, чтобы заменить все строки).

2) Вы можете позвонить по телефону rails-ujs 'самостоятельно. Это взломать и не следует серьезно рассматривать.

3) вы можете перезагрузить страницу «автоматически» (вы потеряете преимущество AJaX).

4) вы можете написать свой собственный JS-код для отправки запроса AJaX.

Answer 2

Мое решение для обработки флажков, созданных динамически. Функция на является обязательной, если вы хотите обрабатывать события на элементах, добавленных динамически.

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 
    }, 
    }); 
});