I am having some problems making twitter bootstrap drop-down navbar work. I ran through numerous tutorials and if I copy the code from there it doesn't work for me. In the console I get the following error

TypeError: $ is undefined
var old = $.fn.dropdown

Here is my code:

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span8">
            <!--Body content-->
            <div class="navbar">
                <div class="navbar-inner">
                    <ul id="tab" class="nav">
                        <li class="active"><a href="#Tab1" data-toggle="tab">Recent</a></li>
                        <li><a href="#Tab2" data-toggle="tab">Top</a></li>
                        <li><a href="#Tab3" data-toggle="tab">Near you</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Filters <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Filter1</a></li>
                                <li><a href="#">Filter2</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="span4">
            <!--Sidebar content-->
        </div>
    </div>
</div>

And here are my includes - they load without problem:

    <link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
    <script type="text/javascript" src="bootstrap/js/bootstrap-dropdown.js"></script> 
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script> 

The page loads up, but when I click on the Filters menu item, it throws the above mentioned exception and nothing happens.

I am having some problems making twitter bootstrap drop-down navbar work. I ran through numerous tutorials and if I copy the code from there it doesn't work for me. In the console I get the following error

TypeError: $ is undefined
var old = $.fn.dropdown

Here is my code:

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span8">
            <!--Body content-->
            <div class="navbar">
                <div class="navbar-inner">
                    <ul id="tab" class="nav">
                        <li class="active"><a href="#Tab1" data-toggle="tab">Recent</a></li>
                        <li><a href="#Tab2" data-toggle="tab">Top</a></li>
                        <li><a href="#Tab3" data-toggle="tab">Near you</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Filters <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Filter1</a></li>
                                <li><a href="#">Filter2</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="span4">
            <!--Sidebar content-->
        </div>
    </div>
</div>

And here are my includes - they load without problem:

    <link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
    <script type="text/javascript" src="bootstrap/js/bootstrap-dropdown.js"></script> 
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script> 

The page loads up, but when I click on the Filters menu item, it throws the above mentioned exception and nothing happens.

• javascript
• css
• twitter-bootstrap

1 Answer 1

You must change the order javascripts are included. JQuery must e before bootstrap.

<link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="bootstrap/js/bootstrap-dropdown.js"></script> 

EDIT, the why: Javascript is executed as soon as it gets loaded. At the time bootstrap-dropdown.js is being parsed, jQuery should have been already loaded. That way jQuery functionality will be available to bootstrap-dropdown.