-1

I can't get a dropdown working, inside navbar using twitter bootstrap, I have:

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </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>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </li>
        </ul>
      </div><!--/.nav-collapse -->
    </div><!--/.container-fluid -->
  </div><!--/.navbar-inner -->
</div><!--/.navbar -->

and the javascript in included in the head has follows:

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8">
    <link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
    <link href="/assets/custom.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-transition.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-affix.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-alert.js?body=1" type="text/javascript"></script> 
    <script src="/assets/bootstrap-button.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-carousel.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-collapse.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-dropdown.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-modal.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-scrollspy.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-tab.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-tooltip.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-popover.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-typeahead.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
    <script src="/assets/application.js?body=1" type="text/javascript"></script>
    ...

So jquery is being included before bootstrap.js, what I'm missing ? what I'm doing wrong ?

Edit: I've cleaned my application.js so now the head looks like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
    <link href="/assets/custom.css?body=1" media="all" rel="stylesheet" type="text/css" />
    <script src="/assets/application.js?body=1" type="text/javascript"></script>
...

And now appears a white triangle pointing up, that wasn't appearing before, but doesn't appear the whole dropdown...

enter image description here

Daniel Romero
  • 1,581
  • 1
  • 20
  • 33
  • Have a slight suspicion that its not working because you are including the bootstrap plugins twice. Once in each individual plugin script and again on the `bootstrap.js` main plugin sheet. So remove either the loose scripts or the main pack script and see if it works. – Andres I Perez Feb 14 '13 at 23:20
  • I don't know why are being included twice in my application.js I only have this: //= require jquery //= require jquery_ujs //= require bootstrap – Daniel Romero Feb 14 '13 at 23:24
  • check [this](http://stackoverflow.com/questions/4231885/rails-3-ujs-controller-gets-called-twice-by-link-to-remote/7778048#7778048) answer. – Andres I Perez Feb 14 '13 at 23:28
  • Ok, I've tried that and it has made a small progress but still not working completly, I've edited my answer – Daniel Romero Feb 14 '13 at 23:51
  • The bootstrap JS is now gone. Include only the `bootstrap.js` script pack (it comes with all of the bootstrap plugins included, so no need to include the loose script files...including both has been known to cause issues like this) – Andres I Perez Feb 15 '13 at 00:57
  • That's what I thought and I did, but didn't work, also tried to include the boostrap.js at the bottom of the view and it didn't work either – Daniel Romero Feb 15 '13 at 10:18
  • Post a link to your dev site to take a look, don't know what else it might be without looking at your site. – Andres I Perez Feb 15 '13 at 13:05

2 Answers2

1

  1. Check your Markup in an isolated environment: http://jsfiddle.net/handtrix/9992A/ (looks good)

  2. Maybe you should include the Javascript files at the bottom of the page.

  3. Did you use Scaffolding ($ rails g controller ...)? If yes remember that the rails scaffold generators often add css files that will screw your bootstrap css. Try to remove them.

  4. Clear the Cache of your Browser

HaNdTriX
  • 28,732
  • 11
  • 78
  • 85
0

The problem turns out to be some twitter bootstrap modals that I was using in my layouts like this:

<div class="modal fade" id="modal_terms">

Instead of that I've changed to:

<div class="modal hide" id="modal_terms">

And it's all working properly now, I hope this helps someone else

Daniel Romero
  • 1,581
  • 1
  • 20
  • 33