problems getting JavaScript dropdown to work in Twitter Bootstrap while using Django

Question

I have written a very simple Django web app that directs urls to views and then has the views render templates. I would like to use Twitter Bootstrap in my templates in order to make the front end of my app more usable. The CSS from Twitter Bootstrap seems to be working fine, but I'm having trouble with the JavaScript. I have set up a test page in my templates directory called dropdown.html and it contains the following:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Simple test of JavaScript dropdown menus in Twitter Bootstrap</title>

    <!-- Le styles -->
    <link href="{{ STATIC_URL }}bootstrap/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
    </style>

    <script src="{{ STATIC_URL }}bootstrap/js/bootstrap.js"></script>
  </head>

  <body>

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="brand" href="#">Dropdown test</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                </ul>
              </li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

  </body>
</html>

Here is a screenshot of the resulting page:

enter image description here

I know that the CSS and JavaScript files are being delivered to the browser because I can see the log output from Django, which shows the following:

[06/Nov/2012 18:14:30] "GET /dropdown/ HTTP/1.1" 200 1465
[06/Nov/2012 18:14:30] "GET /static/bootstrap/js/bootstrap.js HTTP/1.1" 200 56478
[06/Nov/2012 18:14:30] "GET /static/bootstrap/css/bootstrap.css HTTP/1.1" 200 121663

Also, when I load the page in Firefox and use Firebug to "view source" I can see the included JavaScript (all 2025 lines of bootstrap.js) and the dropdown code is right where I would expect it to be (line 571).

Unfortunately, when I click on the dropdown menu, however, nothing happens.

tadasajon · Accepted Answer · 2012-11-07 00:47:35Z

3

Once I included JQuery as well, it began working. The <head> in my example above should have been as follows:

<head>
    <meta charset="utf-8">
    <title>Simple test of JavaScript dropdown menus in Twitter Bootstrap</title>

    <!-- Le styles -->
    <link href="{{ STATIC_URL }}bootstrap/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
    </style>

    <script src="{{ STATIC_URL }}jquery/jquery-1.8.2.js"></script>
    <script src="{{ STATIC_URL }}bootstrap/js/bootstrap.js"></script>
  </head>

answered Nov 7, 2012 at 0:47

tadasajon

14.9k30 gold badges101 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

problems getting JavaScript dropdown to work in Twitter Bootstrap while using Django

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related