twitter bootstrap drop down suddenly not working

Asked 18/4, 2012 at 21:51 Answered 12/4, 2018 at 5:13

Solved ruby-on-rails drop-down-menu twitter-bootstrap

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?

Coterminous answered 18/4, 2012 at 21:51 Comment(6)

Hmm, not too sure but i think it has to do with your js, you seem to be including the bootstrap-dropdown.js loose plugin as well as the bootstrap.js plugin pack (which comes with all of the plugins already included by the way so no need to include the loose plugins), that has been known to cause problems, so just remove the loose plugin and see if that works. – Esthete 18/4, 2012 at 22:29

hmmm still doesn't work. i removed the bootstrap-dropdown. all i have to do is restart the rails server right to take effect? – Coterminous 19/4, 2012 at 1:48

i fixed it. for some reason...//= require jquery was breaking it – Coterminous 19/4, 2012 at 1:50

noooooo! but by removing my jquery, it breaks my other stuff. any ideas on what to do? – Coterminous 19/4, 2012 at 1:52

okay i fixed it haha. all i had to do was...move require jquery below my boostrap. weird. any ideas why? – Coterminous 19/4, 2012 at 1:53

jquery goes first always, otherwise your bootstrap plugins won't work, so its something else. What version of jquery are you loading? – Esthete 19/4, 2012 at 10:14

108

had to move

//= require jquery

below

//= require bootstrap

within

application.js

Coterminous answered 19/4, 2012 at 6:17 Comment(9)

Is this a bug with bootstrap? Why does jquery need to be imported after bootstrap? – Judas 2/5, 2012 at 0:34

thanks, I had require_tree causing some conflicts with my other libraries. Taking that out prevented bootstrap js from working but after moving the //= require jquery below the require bootstrap everything worked! – Sandbox 1/8, 2012 at 18:28

That worked for me too, using the latest checkout of the gem. – Raffia 2/8, 2012 at 3:0

Well this works for me too, but I get a ton of errors in bootstrap now (can't find fn $) – Seniority 22/12, 2012 at 20:41

I upgraded my twitter-bootstrap gem and the dropdown stopped working, moving the jquery line did seem to fix the drop down problem, but had lots of js errors. What actually worked for me was rake assets:clean – Subscribe 25/5, 2013 at 22:38

This solution works but then lots of jquery errors are generating . is there any other solution to fix this issue? – Grovel 30/8, 2014 at 9:58

Additionally.... if you include both of these your dropdown won't work, just choose one to include: //=require bootstrap.min or //=require bootstrap – Contumacious 18/11, 2014 at 19:4

Had the exact same problem, and multiple times everything on BS4's site says require jquery BEFORE Bootstrap . – Magnet 5/3, 2017 at 21:20

This is not a solution. Because bootstrap can not find jQuery. – Jadotville 9/1, 2018 at 4:27

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.

Nerissa answered 5/9, 2012 at 14:47 Comment(1)

Thanks! But it was a little different for me, I had to do rake assets:clean:all – Sawfly 7/12, 2013 at 23:17

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!

Polydipsia answered 15/7, 2012 at 17:36 Comment(5)

This helpmed too. I had assets-precompiled in development and then further changes somehow conflicted. Removing the files under public/assets saved me. I like this much better rather than loading bootstrap before jquery which create warnings in the console. – Sawyers 21/8, 2012 at 9:57

this worked for me too, bootstrap AFTER jquery and did an assets:clean then precompile again. – Isochroous 19/3, 2013 at 9:0

@CraigMcGuff Thanks so much, I was stuck here from hours! – Dynamiter 14/9, 2013 at 4:14

My case is load bootstrap twice. – Rosas 27/2, 2016 at 2:29

This really should be the top answer. Excellent. – Boarish 18/5, 2017 at 23: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.

Kerchief answered 31/5, 2012 at 13:37 Comment(0)

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.

Austin answered 28/10, 2012 at 14:26 Comment(0)

Precompiling the assets again fixed the problem for me

Jolie answered 12/6, 2012 at 11:55 Comment(0)

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

Bousquet answered 27/6, 2014 at 17:2 Comment(0)

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

Scutage answered 27/11, 2013 at 22:47 Comment(0)

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

Colettacolette answered 12/4, 2018 at 5:13 Comment(0)

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

Judas answered 2/5, 2012 at 2:48 Comment(0)

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.

Jamestown answered 3/7, 2012 at 10:34 Comment(0)

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.

Amphibrach answered 11/12, 2012 at 15:20 Comment(0)

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

Crescentia answered 10/1, 2015 at 16:49 Comment(0)

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.

Contributor answered 15/1, 2015 at 5:42 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags