Rails Destroy not working after adding Bootstrap with Webpacker-CodePudding

I am creating a rails project and I am having a couple of issues.

What I've done so far

Firstly I added bootstrap to the project using cdn links in the application.html.erb file in layouts. This gave me the formatting I needed and worked fine HOWEVER, due to turbo-links the javascript required for drop-down navigation stopped working when a page was changed.

To fix this I used Webpacker and followed the tutorial here https://www.bootrails.com/blog/rails-bootstrap-tutorial/ to get bootstrap and the required javascript required working as intended.

The problem I now face

Now that I have added in bootstrap, some of the sinks to destroy records no longer work.

The code below, rather than displaying popup and destroying the record as it did previously, now takes me to the record and displays it.

<%= link_to 'Destroy', emergency_contact, method: :delete, data: { confirm: 'Are you sure?' } %>

Console logs

When I click the above link the following is outputted in the rails server console.

Started GET "/emergency_contacts/1" for 127.0.0.1 at 2022-06-15 11:01:48  0100
Processing by EmergencyContactsController#show as HTML
  Parameters: {"id"=>"1"}
  EmergencyContact Load (0.1ms)  SELECT "emergency_contacts".* FROM "emergency_contacts" WHERE "emergency_contacts"."id" = ? LIMIT ?  [["id", 1], ["LIMIT", 1]]
  ↳ app/controllers/emergency_contacts_controller.rb:63:in `set_emergency_contact'
  Rendering layout layouts/application.html.erb
  Rendering emergency_contacts/show.html.erb within layouts/application
  Rendered emergency_contacts/show.html.erb within layouts/application (Duration: 0.3ms | Allocations: 128)
[Webpacker] Everything's up-to-date. Nothing to do
  User Load (0.1ms)  SELECT "users".* FROM "users" WHERE "users"."id" = ? ORDER BY "users"."id" ASC LIMIT ?  [["id", 1], ["LIMIT", 1]]
  ↳ app/views/layouts/application.html.erb:45
  Rendered layout layouts/application.html.erb (Duration: 7.6ms | Allocations: 3648)
Completed 200 OK in 10ms (Views: 7.9ms | ActiveRecord: 0.3ms | Allocations: 4591)

Bits of code

I've included bits of code that I think are relevant to the problem I'm facing

config/webpacker.yml

Changed source_path: app/javascript to source_path: app/frontend

app/frontend/packs/application.scss

contents:

@import "~bootstrap/scss/bootstrap";

app/frontend/packs/application.js

contents:

import '../js/bootstrap_js_files.js'

app/frontend/js/bootstrap_js_files.js

contents:

// import 'bootstrap/js/src/alert'  
// import 'bootstrap/js/src/button'  
// import 'bootstrap/js/src/carousel'  
import 'bootstrap/js/src/collapse'  
import 'bootstrap/js/src/dropdown'  
// import 'bootstrap/js/src/modal'  
// import 'bootstrap/js/src/popover'  
import 'bootstrap/js/src/scrollspy'  
// import 'bootstrap/js/src/tab'  
// import 'bootstrap/js/src/toast'  
// import 'bootstrap/js/src/tooltip'

app/views/layouts/application.html.erb

head:

<head>
    <title>MyApp</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

   <!-- Warning !! ensure that "stylesheet_pack_tag" is used, line below -->
    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>

Dropdown:

<li >
  <a  href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    dd links
  </a>
  <ul  aria-labelledby="navbarDropdown">
    <li><a  href="#">dd link 1</a></li>
    <li><a  href="#">dd link 2</a></li>
    <li><hr ></li>
    <li><a  href="#">dd link 3</a></li>
    <li><hr ></li>
    <li><a  href="#">dd link 4</a></li>
  </ul>
</li>

CodePudding user response：

Replace link_to to button_to

<%= link_to 'Destroy', emergency_contact, method: :delete, data: { confirm: 'Are you sure?' } %>

to:

<%= button_to 'Destroy', emergency_contact, method: :delete, data: { confirm: 'Are you sure?' } %>

If confirm is still not working you can add onclick option

<%= button_to 'Destroy', emergency_contact, method: :delete, onclick: "return confirm('Are you
sure?')" %>

Update:

For working link_to with options method: :delete and data: { confirm: 'Are you sure?' } is responsible this gem jquery-ujs and in previous Rails versions it was included in assets/javascripts/application.js file

//= require jquery
//= require jquery_ujs

Since you are using javascript_pack_tag with Webpacker and your entry point is javascript/packs/application.js not assets/javascripts/application.js so that to make it works you need to install yarn add jquery-ujs and import it in javascript/packs/application.js file

import { } from "jquery-ujs"

And after that you will be able to use link_to with data: { confirm: 'Are you sure?' } and method: :delete