codedecoder

breaking into the unknown…

bootstrap drop down-menu not working with rails

3 Comments

Recently, a trainee learning bootstrap comes to me for help asking why the bootstrap drop down menu not working. It took me about 20 minutes to figure out the issue. As usual first I tried to see that the HTML structure or markup of menu  as required by Bootstrap dropdown .

The structure used by the trainee is as below and it look fine.

<div class="nav-collapse collapse">

   <ul class="nav pull-right">

      <li class="dropdown">

          <a href="/product_and_services" class="dropdown-toggle" data-toggle="dropdown">
                                     Products and Services<b class="caret"></b>
          </a>

          <ul class="dropdown-menu">

             <li class="nav-header">PRODUCTS</li>

             <li><a href="product.html">Product1</a></li>

             <li><a href="product.html">Product2</a></li>

             <li><a href="product.html">Product3</a></li>

             <li><a href="all_products.html">All products</a></li>

             <li class="divider"></li>

             <li class="nav-header">SERVICES</li>

             <li><a href="service.html">Service1</a></li>

            <li><a href="service.html">Service2</a></li>

            <li><a href="service.html">Service3</a></li>

            <li><a href="all_services.html">All services</a></li>

        </ul>

     </li>

     <li class="dropdown">

        <a href="/about" class="dropdown-toggle" data-toggle="dropdown">About<b class="caret"></b></a>

        <ul class="dropdown-menu">

           <li><a href="our_works.html">Our works</a></li>

           <li><a href="patnerships.html">Parnerships</a></li>

           <li><a href="leadership.html">Leadership</a></li>

           <li><a href="news.html">News</a></li>

           <li><a href="events.html">Events</a></li>

           <li><a href="blog.html">Blog</a></li>

        </ul>

     </li>

     <li><a href="faq.html">FAQ</a></li>

     <li><a href="/contact_us">Contact us</a></li>

     <li><a href="signup.html">Sign up</a></li>

     <li><a href="signin.html">Sign in</a></li>

   </ul>

</div>

So structure is O.K, with Product and Services, and About menu having sub menu within them. By default bootstrap behaviour,  when user click on these two menu the sub menu should appear. But it is not working.

let us try to trigger it manually on firebug console.

$('.dropdown-toggle').dropdown()
TypeError: $(...).dropdown is not a function

O.k show we now know the problem : the dropdown() function is not getting called

Now it may happen due to any of the below reason .

Reason 1: you forget to add bootstrap-dropdown.js file
This is possible if you are using individual js component of bootstrap rather than bootstrap.js or bootstrap.min.js.
but in our case we are using jquery.min.js file, so it is sure that all required js component is included.

Reason 2: jquery.js file is added after  the bootstrap file
the bootstrap.js file is dependent on jquery.js , so jquery.js file must be added before bootstrap.js file.
In rails you can define it in application.js file. My application.js file look like this

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

So here. we have included jquery at the top then jquery_ujs and then we have done require_tree . which will automatically include all the files within app/assets/javascript folder. Currently this folder contain application.js, bootstrap.min.js , jquery.min.js and custom.js file, so all of them will be included in the alphabetical order. the application.js file will be rendered in the end. You can see it by viewing page source. The js are rendered in below sequence as shown in the page source.

<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/boot-business.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap.min.js?body=1" type="text/javascript"></script>
<script src="/assets/custom.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.min.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>

So we can see that jquery.js file is at the top, so this is also not the cause of our problem

Reason 3: jquery or bootstrap file is included more than once
So this is the cause of our problem. You can easily see from the above page source that jquery is included twice, one at the top as jquery.js and again at the second last line as jquery.min.js. Now why this happened . Actually,  //= require jquery line in application.js file load the jquery from jQuery-rails gem which is now shipped as default with rails 3. But the trainee, following the bootstrap tutorial also added jquery.min.js file in the app/assets/javascript folder, which get rendered by //= require_tree . directive.

=> Triggering bootstrap dropdown menu on hover

By default, bootstrap dropdown get triggered on click , but you can make it to open on hover by adding below code, I have added it to custom.js file

$(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()
    });
})

About these ads

Author: arunyadav4u

over 4 years experience in web development with Ruby on Rails.Involved in all stage of development lifecycle : requirement gathering, planing, coding, deployment & Knowledge transfer. I can adept to any situation, mixup very easily with people & can be a great friend.

3 thoughts on “bootstrap drop down-menu not working with rails

  1. Check this out. Steps to include the jquery file to make it work.

  2. Firstly thank you for this article – am sure it helps many people. In some cases the problem is solved and in others there is an growth of understanding!

    For me: dropdowns appeared to work sometimes and not others: even reloading the page could means the dropdown not working.

    After some searching I tried moving the from the bottom of the body to the bottom of the head. Thus far it seems to work though allegedly the page may seem to load more slowly.

    I post this in the vague hope it will save someone else some time.

  3. Since a part of my last message was dropped: let me clarify. It was the application javascript that was moved.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.