How to select multiple items to delete (via checkbox) in Rails 6 - ruby-on-rails

Question

I created a column of checkboxes where in users can select multiple items to delete on a table. Something like this but only a button "Bulk Delete":
Here's my code:
<%= render "shared/nav_dashboard" %>
<%= render "shared/header_dashboard" %>
<section>
<div class="container-fluid">
<!-- Page Header-->
<header>
<h1 class="h3 display">Pages</h1>
</header>
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h4>List of Pages</h4>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th><%= link_to "Bulk Delete", page_path(page), method: :delete, data: { confirm: "Are you sure?" }%></th>
<th>Id</th>
<th>Title</th>
<th>Summary</th>
<th>Date Created</th>
<th colspan="3">Action</th>
</tr>
</thead>
<tbody>
<% #pages.each do |page| %>
<tr>
<td><input type="checkbox" value="false"> </td>
<td scope="row"><%= page.id %></td>
<td><%= page.title %></td>
<td><%= page.body.truncate(60) %></td>
<td> <%= page.created_at.strftime("%B %d, %Y") %> </td>
<td><%= link_to "Show", page_path(page)%></td>
<td><%= link_to "Edit", edit_page_path(page)%></td>
<td><%= link_to "Delete", page_path(page), method: :delete, data: { confirm: "Are you sure?" }%></td>
</tr>
<% end %>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
<%= render "shared/footer_dashboard" %>
I am wondering why it did not work?
How can I do this functionality step by step?

Answer 1

You could to use a form. It'll look something like this (I'm using simpleform, but this will work for every your preferred form-tag helper):
In routes.rb:
resources :pages do
collection do
delete :bulk_destroy
end
end
In your view:
<%= simple_form_for :pages, url: "/pages/bulk_destroy", method: :delete do |f| %>
<ul>
<% #pages.each do |page| %>
<li> <%= page.name %> <input type="checkbox" name="collection_ids[]" value="<%= page.id %>" /> </li>
<% end %>
</ul>
<%= f.submit %>
<% end %>
In your controller:
class PagesController < ApplicationController
def bulk_destroy
Page.where(id: params[:collection_ids]).destroy_all
end
end
Heavy-lifting taken care for you: https://github.com/joshmn/active_action or check out the bare-minimum proof of concept at https://github.com/joshmn/bulk_actions_poc

Answer 2

if you don't prefer to write other separate method then you can try like below, you just need to be sure that when multiple ids are selected it should send as params[:ids] rather then params[:id]
def destroy
ids = params[:ids].present? ? params[:ids] : [parmas[:id]]
Pages.where(id: ids).destroy
end

Answer 3

you might need to change syntax based on you jquery version
$('#bulk_delete').on('click', function(e){
var selectedIds = [];
$("input[type='checkbox']:checked").each(function(e){
ids.push($(this).data('id'))
})
$.ajax({url: 'your action url',type: 'DELETE', data: {ids: selectedIds}})
})