twitter bootstrap drop down suddenly not working

Question

i was wondering if someone could help me. my bootstrap drop down menu suddenly stopped working. i have no idea why. it was working before. i didn't touch my views my layouts views so i think the problem is not there. im pretty sure it has to do with my javascript but i dont know where its coming from.

my gem file is...

gem 'rails', '3.2.3'
gem 'bootstrap-sass', '2.0.1'
gem 'bcrypt-ruby', '3.0.1'
gem 'faker', '1.0.1'
gem 'will_paginate', '3.0.3'
gem 'bootstrap-will_paginate', '0.0.5'
gem 'devise'
gem 'carrierwave'
gem 'rmagick'
gem 'delayed_job_active_record'
gem 'daemons'
gem 'make_voteable'
gem 'admin_data'
gem 'indextank'

and my application.js is...

//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require bootstrap-dropdown
//= require bootstrap
//= require_tree .

im guessing maybe it has to do with my config files somehow?

Answer 1

had to move

//= require jquery

below

//= require bootstrap

within

application.js

Answer 2

if precompiling assets does not work try also removing precompiled assets

rake assets:clean

I found that dropdown js being loaded twice into the asset pipeline seems to open and close the dropdown menu instantly, but would work fine in Heroku/Production.

Answer 3

I had the same problem and I found 2 ways to fix it.

First, let me tell you my set up: I followed the instructions at the bootstrap site, and downloaded bootstrap-dropdown.js. I put it in assets/javascripts. My application.js file looks like this:

//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require_tree .

Dropdowns didn't work.

I noticed in the page source that a script tag for bootstrap-dropdown.js appeared twice: (I've removed the irrelevant stuff for brevity)

<script type="text/javascript" src="/assets/jquery.js?body=1">
<script type="text/javascript" src="/assets/jquery_ujs.js?body=1">
<script type="text/javascript" src="/assets/twitter/bootstrap/bootstrap-dropdown.js?body=1">
<script type="text/javascript" src="/assets/twitter/bootstrap/bootstrap-scrollspy.js?body=1">
<script type="text/javascript" src="/assets/twitter/bootstrap.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-dropdown.js?body=1">
<script type="text/javascript" src="/assets/bootstrap.js?body=1">

So I removed the line //= require_tree . from application.js, restarted the server, and the dropdown worked!

Then I put back the line //= require_tree . and instead removed the file assets/bootstrap-dropdown.js, and again it worked!

Answer 4

I don't understand this, but reordering //= require jquery and //= require bootstrap has seemed to fix the problem twice for me. First moving bootstrap above jquery as Sasha suggests fixed it. Then I did more work and prepared to deploy using jruby on rails 3.2.3. Precompile assets, warble, and the dropdowns quit working both in development and production. Delete public/assets, as well as some .class files and files in tmp. No effect. Finally I moved the order in application.js back to what it had been before the last failure episode, i.e. jquery before bootstrap, and dropdowns work again.

Could an alteration to application.js be triggering a rebuild of some cache, or some process behind the scenes that is the source of the problem? Next time this happens, I will try a trivial change to application.js and see if that does anything.

Answer 5

I was experiencing this on my development machine but my production server worked fine.. I noticed that while reordering the js requires in the application.js fixes the problem in development (dropdowns work again), be careful as this killed my dropdowns in production. I had to go back and put them back the way they were to get production working again. For now I am just temporarily changing them in dev when I need to.

Answer 6

Precompiling the assets again fixed the problem for me

Answer 7

I had this problem too...and it was related to rails turbolinks. On initial page load the drop downs would not work, but after a refresh they would. And, this is because with turbo links some Dom elements might not get loaded/reloaded every time. So, my drop down stopped working consistently (among other things). The rails 4 fix for this is to add the jquery.turbolinks gem https://github.com/kossnocorp/jquery.turbolinks. One thing with this gem that I found (and later came across in some blog) is that the javascript tag must be inside the head. The README does not mention this...but

Answer 8

I found a alternative! all of these solutions didnt work for me. Instead of having the dropdown triggered on click, I had it trigger on hover instead. put on bottom of page in script tags. code from: http://codedecoder.wordpress.com/2013/10/21/bootstrap-drop-down-menu-not-working-rails/

$(document).ready(function(){
    $('.navbar .dropdown').hover(function() {
        $(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
    }, function() {
        $(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp()
    });
n})

Answer 9

Also make sure that you don't have //require bootstrap-sprockets inside your application.js. I have commented that and it worked for me.

Answer 10

See Rails 3.1 Assets - Strange Serving in Development

there is a bug where the compressed version is being included in debug mode in application.js

Answer 11

Precompiling assets did not work. Putting dropdown before jquery worked in development but not in production Removing dropdown still worked in development :-O

Putting the right order and removing everything in public/assets folder made it work in development.

Answer 12

Ticket #5145 was recently closed for this. The fix was reverted, but an application specific solution was supplied at the end, and works for me. Be sure to clear your browser cache, too.

Answer 13

Moving //= require jquery below //= require bootstrap and upgrading gem 'bootstrap-sass', to 2.3.0.1, solved my problem.

I want to add that solution which i mentioned above works only on Localhost but not on Heroku. Solution for both in my case was:

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .

gem bootstrap-sass, 2.3.0.1

and <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> needs to be inside "_header.html.erb" and delete from "application.html.erb" .

Answer 14

I had this error and it turns out my CSS was preventing the dropdown to work.

Specifically I had 'overflow: hidden;' in my header nav CSS . Removing that solved the issue.