Rails with Bootstrap dropdown not working

Question

In my menu, the dropdown is not working. To no avail I have tried many of the suggested fixes. I have loaded bootstrap using bower.

Update: this is the whole nav bar with the dropdown:

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand"><%= Rails.application.class.parent_name %></a>
    </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li><%= link_to 'Dashboard', root_path %></li>
      <li><%= link_to 'Users', users_path %></li>
      <li><%= link_to 'Annotations', annotations_path %></li>
      <li><%= link_to 'Document types', documenttypes_path %></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Admin <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><p>Basic settings</p></li>
        <li><%= link_to 'Document types', documenttypes_path %></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li class="dropdown-header">Access Management</li>
        <li><%= link_to 'Users', users_path %></li>
      </ul>
      </li>
      </ul>
      <% if user_signed_in? %>
        <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "Sign out", destroy_user_session_path, method: :delete %></li>
        <li><%= link_to edit_user_registration_path do %>
          <% if current_user.username.empty? %>
            <strong><%= current_user.email %></strong>
          <% else %>
            <strong><%= current_user.username %></strong>
          <% end %>
          <% end -%>
        </li>
        </ul>
      <% else %>
        <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "Sign up", new_user_registration_path %></li>
        </ul>
      <% end %>
  </div><!--/.nav-collapse -->
  </div>
</nav>

This is the application.html.erb:

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Shine</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="ideas at work">

  <%= favicon_link_tag 'iawfavicon.ico' %>

  <%= stylesheet_link_tag 'application', media: 'all' %>
  <%= javascript_include_tag 'application' %>
  <%= csrf_meta_tags %>

</head>

here is client output:

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Shine</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="ideas at work">

  <link rel="shortcut icon" type="image/x-icon" href="/assets/iawfavicon-c1333c6e589de80592f43474f4394544f63ac4b8c8fe34892e07c3537188285f.ico" />

  <link rel="stylesheet" media="all" href="/assets/annotations.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" />
<link rel="stylesheet" media="all" href="/assets/comments.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" />
<link rel="stylesheet" media="all" href="/assets/documenttypes.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" />
<link rel="stylesheet" media="all" href="/assets/application.self-56daaaf14b543461ebacd513032f4d2032d632debe144e8797fee1f5332d6cbc.css?body=1" />
<link rel="stylesheet" media="all" href="/assets/bootstrap-sass-official/assets/stylesheets/_bootstrap.self-a0231ca7af81b4da1fab75a6d8ba66f6295006a067bd0f206cd333698f2e752d.css?body=1" />
  <script src="/assets/jquery/dist/jquery.self-129d502feca6efc755ec29c19a27cd220b0a9cecbbf9dea951e47b24b0b1aec7.js?body=1"></script>
<script src="/assets/jquery_ujs.self-784a997f6726036b1993eb2217c9cb558e1cbb801c6da88105588c56f13b466a.js?body=1"></script>
<script src="/assets/angular/angular.self-09d22056f1fb887d7012ce3c2f5b58bf03df2dd7b91b6c2510a961ffccb25380.js?body=1"></script>
<script src="/assets/angular_test_app.self-589fc9d4232734420eb9d48457082936ade14ecfa75b8fcb837f8eec839225c9.js?body=1"></script>
<script src="/assets/annotations.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
<script src="/assets/comments.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
<script src="/assets/documenttypes.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
<script src="/assets/users_app.self-aa5a0d162e5e2b48f2c7b49bf9de23956a8367276459a59f726dc974f3a5511a.js?body=1"></script>
<script src="/assets/application.self-3b8dabdc891efe46b9a144b400ad69e37d7e5876bdc39dee783419a69d7ca819.js?body=1"></script>
  <meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="VysFjpn1V//BXLI1RpVkr36iZMdP1xChZ1BkaBWQvzMagsKiHMWAkG2mfECKDocCncvjzzejXlUdYZHuoS6Hrw==" />

</head>

<body class="container-fluid">

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand">Shine</a>
    </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li><a href="/">Dashboard</a></li>
      <li><a href="/users">Users</a></li>
      <li><a href="/annotations">Annotations</a></li>
      <li><a href="/documenttypes">Document types</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Admin <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><p>Basic settings</p></li>
        <li><a href="/documenttypes">Document types</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li class="dropdown-header">Access Management</li>
        <li><a href="/users">Users</a></li>
      </ul>
      </li>
      </ul>
        <ul class="nav navbar-nav navbar-right">
        <li><a rel="nofollow" data-method="delete" href="/users/sign_out">Sign out</a></li>
        <li><a href="/users/edit">
            <strong>smee</strong>
</a>        </li>
        </ul>
  </div><!--/.nav-collapse -->
  </div>
</nav> <!-- top menu for all pages -->



  <section class="search-results">
    <header><h3>Document Types</h3></header>
    <table class="table table-hover">
        <thead>
            <tr>
                <th>Name</th>
                <th>Description</th>
                <th style="text-align:center">Active</th>
                <th>Created</th>
                <th>Last update</th>
                <th style="text-align:center" colspan="2"><a class="btn btn-success btn-xs" href="/documenttypes/new">Add</a></th>
            </tr>
        </thead>
        <tbody>
                <tr>
                    <td>Invoice</td>
                    <td></td>
                    <td style="text-align:center"><input type="checkbox" name="" id="" value="" disabled="disabled" checked="checked" /></td>
                    <td>2016-09-05</td>
                    <td>2016-09-05</td>
                    <td><a class="btn btn-default btn-xs" href="/documenttypes/1">Open</a></td>
                </tr>
                <tr>
                    <td>Credit Note</td>
                    <td></td>
                    <td style="text-align:center"><input type="checkbox" name="" id="" value="" disabled="disabled" /></td>
                    <td>2016-09-05</td>
                    <td>2016-09-05</td>
                    <td><a class="btn btn-default btn-xs" href="/documenttypes/2">Open</a></td>
                    <td><a data-confirm="Please confirm!" class="btn btn-danger btn-xs" rel="nofollow" data-method="delete" href="/documenttypes/2">Delete</a></td>
                </tr>
        </tbody>
    </table>
</section>

</body>

</html>

Please upload the client output and the whole navbar, I think you are missing bootstrap.css/jquery.js or bootstrap.js.. — Luuk Skeur
– Luuk Skeur, Commented Sep 5, 2016 at 10:44
whole nav-bar added ; what do you mean with the client output ? — Dimitri de Ruiter
– Dimitri de Ruiter, Commented Sep 5, 2016 at 11:02
I mean CTRL+U in frontend. I tried your code in bootply, and it works like it should. So I assuming you are missing some javascript (jquery or bootstrap), and in the right order. bootply.com/u8wYIpAfWz — Luuk Skeur
– Luuk Skeur, Commented Sep 5, 2016 at 11:26
updated with client output; CTRL+U is firefox ;-) I use chrome and safari on MAC — Dimitri de Ruiter
– Dimitri de Ruiter, Commented Sep 5, 2016 at 11:41
You are missing the bootstrap.js script, include this after jQuery. — Luuk Skeur
– Luuk Skeur, Commented Sep 5, 2016 at 12:28

Luuk Skeur · Accepted Answer · 2016-09-06 12:15:18Z

It seems like you missed the bootstrap.js file, it does include bootstrap.min.css and jquery.js but it is missing Bootstrap's javascript. In order to manage this, include it custom in the head section or fix your bower setup (bower.json):

  "dependencies": {
    "bootstrap-sass": "3.3.6"
  },
  "overrides": {
    "bootstrap-sass": {
      "main": [
        "./assets/stylesheets/_bootstrap.scss",
        "./assets/javascripts/bootstrap/transition.js",
        "./assets/javascripts/bootstrap/alert.js",
        "./assets/javascripts/bootstrap/button.js",
        "./assets/javascripts/bootstrap/carousel.js",
        "./assets/javascripts/bootstrap/collapse.js",
        "./assets/javascripts/bootstrap/dropdown.js",
        "./assets/javascripts/bootstrap/modal.js",
        "./assets/javascripts/bootstrap/tooltip.js",
        "./assets/javascripts/bootstrap/popover.js",
        "./assets/javascripts/bootstrap/scrollspy.js",
        "./assets/javascripts/bootstrap/tab.js",
        "./assets/javascripts/bootstrap/affix.js",
        ...
      ]
    }

Make sure the correct javascript is included, in my case all javascript elements I needed are included in bower by overriding bootstrap. But you. could also simply only include ./assets/javascripts/bootstrap.min.js

Jiri Tousek · Accepted Answer · 2016-12-07 08:07:49Z

0

Try this:

$(document).ready(function() {
    $(".dropdown-toggle").dropdown();
});

edited Dec 7, 2016 at 8:07

Jiri Tousek

12.5k5 gold badges33 silver badges45 bronze badges

answered Dec 7, 2016 at 7:44

user7208575

Collectives™ on Stack Overflow

Rails with Bootstrap dropdown not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related