Why doesn't my bootstrap's dropdown work?

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

Solution 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!! :)

Solution 2

Like many others asking this question, I spent hours trying to figure this out. Here's what might be wrong if your dropdowns are not working:

I am new to bootstrap and in my case I was using the bootstrap demo here as a model:

bootstrap demo

But only after I followed the basic boostrap install.

Therefore I had the 'bootstrap.js' file installed. Check the code and note that in this demo a series of js scripts are located at the end of the document, but the default 'bootstrap.js' is not one of them. Removing it made my dropdowns work properly.

It is also possible that it can work the other way around where you keep 'bootstrap.js' and get rid of the others. This might be a better solution.

Hope this helps some other poor bastard like me. Best wishes on all your projects!

Solution 3

Looks good... but try putting the drop-down menu links in quotes.
I also changed the first href to just "#"

<ul class="nav">
    <li class="dropdown" id="d1">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#"  >
                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>

And make sure you have included the bootstrap-dropdown.js file.

Comments

[user192249]

nope.. still doesn't work for me :( I'm using Rails so the javascript file for the dropdown that I had created for the application should be automatically included. :/

[c0deNinja]

are you sure it is loading the required js files? use firebug or something to check and see the js files that are loaded.

[user192249]

yup! It's something else. See my answer for the reason why! Thanks btw! :)

[hellomello]

I dont see why this would work, bootstrap would need jquery to work. if you try to precompile your assets, you'll probably see that it wont work again