Question

Thanks for trying to help in advance!

My problem is that twitter bootstrap's dropdown menu (for navbar) doesn't work for me and I am very lost now. My header code (so yes, I do include their .js and call it):

<head>
  <title>{% block title %}User test{% endblock %}</title>
  <!--for IE6-8 support of HTML elements -->
  <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

  <script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script><!--dropdown addon-->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><!--jquery-->
  <script type="text/javascript">
        $(document).ready(function(){
        $('.dropdown-toggle').dropdown();
    });
   </script>

   <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}style.css" /><!--link to my style.css-->
   <link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" /><!--link to bootstrap's css-->

The menu item that is suppose to have dropdown:

     <ul class="nav">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        {% trans "Logged in" %}: {{ user.username }} 
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="{% url auth_password_change %}">{% trans "Change password" %}</a></li>
                        <li><a href="{% url auth_logout %}">{% trans "Log out" %}</a></li>
                    </ul>
                </li>
                <li><a href="/upload/">{{ "Upload your CVS" }}</a></li>
                <li><a href="/settings/">{% trans "Settings" %}</a></li>
      </ul>

Thanks again,

blargie-bla

Was it helpful?

Solution

Switch the order of your js includes so jQuery is loaded first.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><!--jquery-->
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script><!--dropdown addon-->

OTHER TIPS

you must use the last version of jquery (1.7)

As John Said I indeed needed to change the lines. For some magical reason (still don't know why!) it was breaking at the breakpoints that weren't even set and hence jquery wasn't loading. After rebooting the browser, it worked.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top