Bootstrap dropdown still doesn't work after first click (link_to version)
I saw there was a similar post here, but it didn't quite answer my version of the question. I'm still new to Rails, so I know this should be a simple reason for the logic.
I don't know how to adapt Bootstrap with rail routes; It keeps adding # to the end of my links, but I'm not sure how to prevent this, but still enable the dropdown.
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Conditions & Treatments <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><%= link_to 'Achilles Tendinitis, Tendinosis', conditions_achilles_path %></li>
<li><%= link_to 'Arthritis, Hallus Limitus, Hallux Rigidus', conditions_arthritis_path %></li>
</ul>
</li>
If anyone can explain that I'm sure this is simple logic that would be great, thanks.
source to share
Turbolinks may interfere with the behavior of your javascript application and it is up to you to fix it. It's pretty easy to do this with code you've written, but when the problem is with a third-party library or plug-in, identifying and resolving a conflict can get much more frustrating.
Common causes of such conflicts include:
- DOM Ready event initialization
- Initialization code that loads external scripts and adds elements to the document
head
- Using global variables in an object
window
.
Turbolinks recommends that you put your JavaScript in <head>
so the JS doesn't get executed on every change <body>
.
You can put JS at the bottom of the page and still get your code to work. The code has to clear the previous state of the page, reinitialize, and not always rely on document.ready
. To enable tooltips, for example:
// Cleanup + enable Bootstrap tooltips on jQuery ready event as well as
// Turbolinks page change event.
$(document).on("ready page:change", function() {
$("[data-toggle='tooltip']")
.tooltip("destroy")
.tooltip();
});
source to share