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 layout

Answer 1

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 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

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 4

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 5

had to move

//= require jquery

below

//= require bootstrap

within

application.js

Answer 6

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})