Question

I followed instructions on http://twitter.github.com/bootstrap/javascript.html#dropdowns to enable a dropdownlist in my navigation bar but failed to do so. I can’t seem to show my dropdown list. My codes are also the same as the demo in the website. Can anyone help me solve this? Below are the codes:

<ul class="nav">
    <li class="dropdown" id="d1">
            <a class="dropdown-toggle" data-toggle="dropdown" href="d1"  >
                Sub-User Management
                <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
                <li><a href=<%=subusers_url%>>Sub-Users</a></li>
                <li><a href=<%=monitor_records_url%>>Monitors</a></li>
                <li class="divider"></li>
            </ul>
        </li>
    </ul>

application.js

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

Answer 1

I’m finally able to solve this problem! All my codes are perfect, its just that I had to change a couple of things as I was creating the application in Rails.

For Rails (Development Mode), in application.js, you need to call jquery before calling bootstrap.

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

However, for Rails (Production Mode), in application.js, you need to call bootstrap before calling jquery.

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

However, I’m still researching on why is it so. Anyways, it works!! 🙂