I am working on a Rails application with a permanent navigation bar, including dropdown download windows. For some reason, it works sporadically; when starting or updating, drop-down lists will always work, after the first redirection, they will never work, and after that it seems to alternate between workers and does not work. When this does not work, nothing just happens when the click is called. My initial suspicion was that the Turbolinks were to blame, but I didn’t , and I was able to verify this (see below). After spending several hours reading, I tried all the “obvious” corrections that I could find until I got lucky.
It is worth noting that the problem persists ...
- with or without turbolinks.jquery
- with bootstrap OR bootstrap with stars
- in the entire latest version of bootstrap-sass self-tuning
- modify or modify my application.js file
- with application.js data-turbolinks-track set to true OR false
- in development or production
Edition:
By completely disabling Turbolinks (by removing the turboling and jquery-turbolinks stones, deleting references to them both in application.js, and deleting the data-turbolinks-track attributes in application.html.erb), I do not have working drop-down lists. However, I would still like to know why this does not work, as I hope to turn on the turboprops again before the release. / End-editing
These are the files that I think are relevant:
application.js
Note that // = a tree is required. not. This is intentional (I have several javascripts for specific pages, and I include them with yields in application.html.erb).
Gemfile.rb
source 'https://rubygems.org'
application.css.scss
(just to prove that I included other parts of bootstrap effectively)
/* CHARSET -------------------------------------------------- */ @charset "utf-8"; /* IMPORTS - BOOTSTRAP -------------------------------------------------- */ @import "bootstrap-sprockets"; @import "bootstrap"; /* IMPORTS - SCSS MIXINS -------------------------------------------------- */ @import "mixins/*"; /* IMPORTS - LAYOUT CSS -------------------------------------------------- */ @import "layout"; /* IMPORTS - CONTROLLERS' CSS -------------------------------------------------- */ @import "controllers/*";
application.html.erb
Please note that there are two different possible navigation bars (one at the entrance to the system, the other at the exit from the system) that deduce from partial ones. Only _nav_logged_in.html.erb contains drop-down lists, and I will include the following.
Also note that all javascript downloads are at the bottom of the file.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="This is APO Lite in the context of Ruby on Rails"> <meta name="author" content="Connor McKee"> <title>APO Lite</title> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %> </head> <body role="document"> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <%= link_to "APO Lite", root_url, id: "navLogo", class: "navbar-brand" %> </div> <% if logged_in? %> <%= render 'layouts/nav_logged_in' %> <% else %> <%= render 'layouts/nav_logged_out' %> <% end %> </div> </nav> <header class="jumbotron subhead <%= 'expandedJumbotron' if current_page? root_url %>" id="overview"> <div class="container"> <% if has_project? && !current_page?( root_url ) %> <h1><%= current_project.name %></h1> <p class="lead"><%= current_project.description %></p> <% else %> <h1>WELCOME TO APO LITE</h1> <p class="lead">Your Journey towards a Better Project Management Experience Starts Here</p> <% end %> </div> </header> <div class="container"> <% if content_for?(:context) %> <div class="row" id="context"> <div class="col-md-12"> <%= yield :context %> </div> </div> <% end %> <%= yield %> <% if Rails.env.development? %> <div class="row"> <div class="col-md-12"> <%= debug(params) %> </div> </div> <% end %> </div> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> <% if content_for?(:page_js) %> <%= yield :page_js %> <% end %> </body> </html>
_nav_logged_in.html.erb
Finally, here are the dropdown menus themselves.
<div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li> <% if has_project? %> <%= link_to current_project.name, current_project %> <% else %> <a href="#about">My Project Name</a> <% end %> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Administer<span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Questionnaires</a></li> <li><a href="#">Reports</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Support<span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Documentation</a></li> <li><a href="#">Help Desk</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><%= link_to "Log out", logout_path, method: "delete" %></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><%= current_user.first_name %><span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><%= link_to "My Profile", current_user %></li> <li><%= link_to "Log out", logout_path, method: "delete" %></li> </ul> </li> </ul> </div>
And finally, here's how scripts load when the application is running
This is with bootstrap stars, but the bootstrap itself causes the same problems. Please observe the absence of duplication anywhere.
<script src="/assets/jquery.self-d03a5518f45df77341bdbe6201ba3bfa547ebba8ed64f0ea56bfa5f96ea7c074.js?body=1" data-turbolinks-track="false"></script> <script src="/assets/jquery_ujs.self-8e98a7a072a6cee1372d19fff9ff3e6aa1e39a37d89d6f06861637d061113ee7.js?body=1" data-turbolinks-track="false"></script> <script src="/assets/jquery.turbolinks.self-176b9819f30444d441e820bbccd3264fe57753aeafd54dec732b0dbc77129a2a.js?body=1" data-turbolinks-track="false"></script> <script src="/assets/turbolinks.self-c37727e9bd6b2735da5c311aa83fead54ed0be6cc8bd9a65309e9c5abe2cbfff.js?body=1" data-turbolinks-track="false"></script> <script src="/assets/bootstrap/affix.self-68d1a5161d04ca9fe1b9d9f4114d9426c7798bf90f2703a97aca35c8113469bb.js?body=1" data-turbolinks-track="false"></script> <script src="/assets/bootstrap/alert.self-15ce09eba576e56db3edfd87accc0ff48823df915169e350b4fd97290f96aee1.js?body=1" data-turbolinks-track="false"></script> <script src="/assets/bootstrap/button.self-37c62bff1d75f86f3348b8679873d5156d8b9938b62841038dca21690f4740f1.js?body=1" data-turbolinks-track="false"></script> <script src="/assets/bootstrap/carousel.self-9aaab1a477b9c1156bab751cb8da47f77dace6da88eef8ae830e60f3cff3a8be.js?body=1" data-turbolinks-track="false"></script> <script src="/assets/bootstrap/collapse.self-eeece00cd06a3d7cc071ab7845b549d4991edd0f0895e4be70fe40bac2fb5f4b.js?body=1" data-turbolinks-track="false"></script> <script src="/assets/bootstrap/dropdown.self-a3998e7ca949c04cb86b5c635deb0abcc7a24dc02e81be66b8acfef02d811e45.js?body=1" data-turbolinks-track="false"></script> <script src="/assets/bootstrap/modal.self-f2759e138605770e60526c00c6d86cbb3378da203641f9d6b204c9f0192b9267.js?body=1" data-turbolinks-track="false"></script> <script src="/assets/bootstrap/scrollspy.self-5ea180afe4404f83fc97d997833f2edefd34475b0b5ddab310e27abc2bbd5f2f.js?body=1" data-turbolinks-track="false"></script> <script src="/assets/bootstrap/tab.self-e1bba7115c90301056ee94c4716de2fcbe4498015def2dab9ff9879f339bd245.js?body=1" data-turbolinks-track="false"></script> <script src="/assets/bootstrap/transition.self-7742dca5e6acf313fbb217811b48468282cddf1a9baea5c89ec92e367ef242cb.js?body=1" data-turbolinks-track="false"></script> <script src="/assets/bootstrap/tooltip.self-c3b5c16f394ab9c0391db4431aac4f2d2ddf1bba4c5d3228ed343de05ecc8e83.js?body=1" data-turbolinks-track="false"></script> <script src="/assets/bootstrap/popover.self-2674d99c3ab0415dba0b958a80b3840f70ff6368b155d890306c0291be49453b.js?body=1" data-turbolinks-track="false"></script> <script src="/assets/bootstrap-sprockets.self-fbfa5ad7d9aa0afe439ec4ff3883acc4cb92b62cb67c40d674320c9aa1d4642d.js?body=1" data-turbolinks-track="false"></script> <script src="/assets/application.self-f98a0dd27ad1c55b2b9cfe97296d4887e5d4a4535b3bbbf9130c1050771738b2.js?body=1" data-turbolinks-track="false"></script>