CODEWITHSUNDEEP
javascriptdrop-down-menutwitter-bootstrap
user192249
user192249

Reputation: 443

Why doesn't my bootstrap's dropdown work?

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

Upvotes: 2

Views: 12482

Answers (9)

Farid Nor
Farid Nor

Reputation: 11

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>

Take a look at this code. Probably at the end of your page, you may need to change the src link. Then probably it will work.

Upvotes: -1

OsLivon
OsLivon

Reputation: 49

I was having the same issue using Bootstrap in a WordPress site. In fact it was because in my code I included the javascript.js file like this: 

<script src="js/bootstrap.min.js"></script>

What I have to do is to write like instead:

<script src="<?php echo get_template_directory_uri(); ?>/js/bootstrap.min.js"></script>

So make sure you're including Bootstrap's javascript.js file correctly.

Upvotes: 0

user2738214
user2738214

Reputation: 1

In my rails3 app I just cut all piece of code that related to dropdown, then paste this code in new file called dropdown.js, and then require this file in application.js In that way I got working properly my app in development and in production too. Requiring bootstrap.js before jquery in production (as say user192249 above) may broken some other part of app that use js.

Upvotes: 0

A Star
A Star

Reputation: 627

Make sure you are using the latest JQuery

Upvotes: 0

ChrisLee
ChrisLee

Reputation: 99

In fact, you include "data-toggle="dropdown", so do not need "$('.dropdown-toggle').dropdown()", those two did the same things!

And remember, do not forget to import jQuery.js, bootstrap.js based on it!

Upvotes: 0

Bobby Woods
Bobby Woods

Reputation: 31

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!

Upvotes: 3

user192249
user192249

Reputation: 443

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

Upvotes: 0

hajpoj
hajpoj

Reputation: 13379

I copy pasted your code into jsfiddle and the drop down works... http://jsfiddle.net/hajpoj/Hf8Xw/3/

so I think the issue is something else. Double check to make sure boostrap-drodown.js is getting loaded by the page ( view the source of the page and verify that indeed you see this line in the html source ). 

<script src="/assets/bootstrap-dropdown.js?body=1" type="text/javascript"></script>

Also try restarting your server, checking your asset source path, etc.

Upvotes: 0

c0deNinja
c0deNinja

Reputation: 3986

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.

Upvotes: 1

Related Questions