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 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>
>Solution :
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?')" %>