12

In my Rails application, I have the following code for a dropdown menu: 

<header class="navbar navbar-fixed-top">
  <div class="navbar-inner">
<div class="container">
    <nav>
            <ul class="nav pull-right">
                <li><%= link_to "Home", root_path %></li> 
            <% if signed_in? %>
                <li id="fat-menu" class="dropdown">
                    <a href="#" class="dropdown-toggle" data toggle="dropdown">
                        Account <b class="caret"></b>
                    </a>
                <ul class="dropdown-menu">
                        <li><%= link_to "Settings", edit_user_path(current_user) %></li>
                        <li class="divider"></li>
                        <li>
                            <%= link_to "Sign out", signout_path, method: "delete" %>
                        </li>
                    </ul>
                </li>
            <% else %>
                <li><%= link_to "Sign in", signin_path %>
            <% end %>
            </ul>
        </nav>
  </div>
</div>
</header>

In my application.js file I have the following code: 

    //= require bootstrap

I have no idea why the dropdown menu isn't working, and I have no idea how to fix it. A few days ago, it was working fine, and now it no longer functions properly. Thanks for any help!

user1483441
  • 651
  • 2
  • 6
  • 15

6 Answers6

11

I figured out the answer from this previous StackOverflow question:

twitter bootstrap drop down suddenly not working

I had to put //= require jquery below my line of code that required bootstrap, and then it worked!

Community
  • 1
  • 1
user1483441
  • 651
  • 2
  • 6
  • 15
  • 1
    and then I had to move it back up, and it also worked :/ but other elements didn't – Aleks Sep 20 '13 at 00:02
  • yay! I spend 2 hours trying to figure this out! THANKS! – vanboom Dec 21 '14 at 00:51
  • @user1483441 It works but as Aleks said, other jquery elements are not working because bootstrap loads fist and uses jquery but jquery in not loaded at that time – santosh May 01 '15 at 06:42
8

I tested your HTML code and it worked fine.

First of all, make sure you are loading jQuery first:

//= require jquery
//= require bootstrap

Also, you have to call the dropdown via javascript:

$('.dropdown-toggle').dropdown()
Brandon Jernigan
  • 461
  • 2
  • 4
  • Thanks for your response! Where should I call dropdown with the javascript you gave me? I added the javascript to my header file and it still isn't working. – user1483441 Jul 28 '12 at 14:24
  • 1
    You can add it to the end of application.js - if you add it to the header then it gets loaded before your assets, which will not work. – Brandon Jernigan Jul 28 '12 at 21:43
  • Fixed for me. Was following a tutorial and they forgot this line :) – user3534641 Mar 20 '15 at 16:56
5

The solution lies in the order you import the javascript dependencies.

This is what I had initially in my application.js

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree

When I removed bootstrap-sprockets i my dropdown worked. However, I did not want to remove bootstrap-sprockets. So My new order looked like this;

//= require bootstrap-sprockets
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require_tree .

Then, to be safe, I had to clean and pre-compile assets by running the following;

rake assets:clean
bundle exec rake assets:precompile

This worked for me.

mwangi
  • 1,616
  • 1
  • 20
  • 23
4

I've got in the same problem with default Rails and twitter-bootstrap-rails gem installation.

Direct call of dropdown initialisation works indeed, but it looks like kind of a workaround for me. So, I continued to search for the answers and was able to find the one that looks more appropriate:

I have solved this issue. I add following code in users.js.coffee:

jQuery ->
  $('.dropdown-toggle').dropdown()

Solution was found here. Thus, I added this code to app/assets/javascripts/bootstrap.js.coffee, so the final code in it looks like the following: 

jQuery ->
  $("a[rel~=popover], .has-popover").popover()
  $("a[rel~=tooltip], .has-tooltip").tooltip()
  $('.dropdown-toggle').dropdown()

And right after this dropdown in navbar started to work exactly as expected.

zloynemec
  • 451
  • 5
  • 8
  • I had an issue where the dropdown would work perfectly find upon a page refresh, but as soon as I navigated to a different page it would cease working. I added that one line (`$('.dropdown-toggle').dropdown()`) to the `bootstrap.js.coffee` file and things worked like a charm. Thanks! Edit: Now looking [here](http://stackoverflow.com/a/24457190/1814019) it looks like my issue may be TurboLinks related. Either way, this still worked for me. – TheBrockEllis Feb 26 '16 at 20:36
0

I have had this issue for the whole day but was finally able to fix it. I applied the solution above (changing the order) and the dropdown worked. However, I noticed in the console there were errors (Uncaught ReferenceError: jQuery is not defined) due to the fact that bootstrap-sprockets was called before jQuery. I have found a solution that worked for me here

Basically, I have included the following code below the required items in application.js as:

   //= require jquery
   //= require tether
   //= require jquery_ujs
   //= require bootstrap
   //= require bootstrap-sprockets
   //= require turbolinks
   //= require_tree .


   $(document).ready(function(){
       $('.dropdown-toggle').dropdown();
   });

For me this worked like a charm. Hope that helps somebody!

CyberMessiah
  • 1,084
  • 11
  • 14
0

I ran into the same issue and removing //= require bootstrap from my application.js worked for me. I hope this too helps someone!

freshmurry
  • 35
  • 5