I am working on a Rails project and encountering a few challenges.
Progress so far
Initially, I incorporated Bootstrap into the project using CDN links in the application.html.erb file in layouts. This allowed me to achieve the desired formatting, but there was an issue with the drop-down navigation not functioning properly when changing pages due to turbo-links.
To address this, I utilized Webpacker and followed a tutorial available at to ensure that Bootstrap and the necessary JavaScript worked as expected.
Current issue
After integrating Bootstrap, some of the links to delete records no longer work as intended.
Instead of prompting with a confirmation dialog and deleting the record as before, clicking the code snippet below redirects me to the record and displays it.
<%= link_to 'Destroy', emergency_contact, method: :delete, data: { confirm: 'Are you sure?' } %>
Console logs
When the above link is clicked, the following output is observed 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)
Code snippets
Here are some code snippets that I believe are relevant to the issue I am facing
config/webpacker.yml
Modified 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 class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
dd links
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">dd link 1</a></li>
<li><a class="dropdown-item" href="#">dd link 2</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">dd link 3</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">dd link 4</a></li>
</ul>
</li>