Rails: Bootstrap dropdown menu not working

rails bootstrap javascript not working
bootstrap-select-rails
bootstrap dropdown not expanding
bootstrap dropdown width fit content
rails 6 bootstrap
rails 6 bootstrap modal
ruby on rails bootstrap example
bootstrap 4.2 dropdown

I am quite new to Rails and have been following the tutorial by Michael Hartl. Everything has been going along really well until I got to the drop down menu, which was wasn't working, then was working and now isn't working :( I've read several posts and fixes and I suspect my tinkering has gotten to the point where quite simply, I've done something to stop it working. I will say that I initially had the bootstrap-sass 2.x in my gem file, then changed it to 3.x, but went back to 2.x because I didn't realise that going to 3.x would result in issues due to class name changes. So, perhaps the time this was working was when I had bootstrap-sass 3.x installed, not sure. From what I can tell though everything is set up the way it needs to be. I am developing under Windows 8.1 and I had to fix an issue with execjs and in specific the runtimes.rb file. So, here are my details:

Gemfile:

source 'https://rubygems.org'
ruby '1.9.3'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.0.2'
gem 'bootstrap-sass', '2.3.2.0'
gem 'sprockets', '2.11.0'
gem 'bcrypt-ruby', '3.1.2'

# Use sqlite3 as the database for Active Record
gem 'mysql2', '0.3.15'

# Use SCSS for stylesheets
gem 'sass-rails', '4.0.1'

# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '1.3.0'

# Use CoffeeScript for .js.coffee assets and views
gem 'coffee-rails', '4.0.1'

# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby

# Use jquery as the JavaScript library
gem 'jquery-rails'

# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'

# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '1.2'

application.js

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require_tree .

_header.html.erb (where the drop down is)

<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="navbar-inner">
    <div class="container">
      <%= link_to "Catered Fit", root_path, id: "logo" %>
<!--      <%= link_to image_tag("logo.jpg", width: "25%"), root_path %>    -->
      <nav>
        <div class="nav pull-right">
<!--          <li><%= link_to "Home", root_path %></li>
          <li><%= link_to "Help", help_path %></li>   -->
          <% if !signed_in? %>
            <div class="navbar-form">
            <%= form_for(:session, url: sessions_path) do |f| %>
              <div class="span2 input-xlarge">
                <% f.label :email %>
                <%= f.text_field :email, placeholder: "Email" %>
              </div>
              <div class="span2 input-small">
                <% f.label :password %>
                <%= f.password_field :password, placeholder: "Password" %>
              </div>
              <div class="span2">
                <%= f.submit "Sign in", class: "btn btn-primary" %>
              </div>
            <% end %>
          <% else %>  
            <li><%= link_to "Users", '#' %></li>
            <li id="fat-menu" class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                Account <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li><%= link_to "Profile", current_user %></li>
                <li><%= link_to "Settings", edit_user_path(current_user) %></li>
                <li class="divider"></li>
                <li>
                  <%= link_to "Sign out", signout_path, method: "delete" %>
                </li>
              </ul>
              <li><%= link_to "Sign out", signout_path, method: "delete" %></li>
            </li>
          <% end %>
        </div>
      </nav>
    </div>
  </div>
</header>

I don't see any errors in the console window and apart from the drop down everything else is working fine.

The following is the source code from the webpage:

<!DOCTYPE html>
<html>
  <head>
    <title>Ruby on Rails Tutorial Sample App | Dave Williams</title>
    <link data-turbolinks-track="true" href="/assets/application.css" media="all" rel="stylesheet" />
    <script data-turbolinks-track="true" src="/assets/application.js"></script>
    <meta content="authenticity_token" name="csrf-param" />
<meta content="SlKTCvDr5MFLP0EkthJHQeGIw+Yp0oGUrxvAeQMnVts=" name="csrf-token" />
    <!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
  </head>
  <body>
    <header class="navbar navbar-fixed-top navbar-inverse">
  <div class="navbar-inner">
    <div class="container">
      <a href="/" id="logo">Catered Fit</a>
<!--      <a href="/"><img alt="Logo" src="/assets/logo.jpg" width="25%" /></a>    -->
      <nav>
        <div class="nav pull-right">
<!--          <li><a href="/">Home</a></li>
          <li><a href="/help">Help</a></li>   -->
            <li><a href="#">Users</a></li>
            <li id="fat-menu" class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                Account <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li><a href="/users/1">Profile</a></li>
                <li><a href="/users/1/edit">Settings</a></li>
                <li class="divider"></li>
                <li>
                  <a data-method="delete" href="/signout" rel="nofollow">Sign out</a>
                </li>
              </ul>
              <li><a data-method="delete" href="/signout" rel="nofollow">Sign out</a></li>
            </li>
        </div>
      </nav>
    </div>
  </div>
</header>
    <div class="container">
      <div class="row">
  <aside class="span4">
    <section>
      <h1>
        <img alt="Dave Williams" class="gravatar" src="https://secure.gravatar.com/avatar/387593e03fccc38895fc20a2084e27f5?s=50" />
        Dave Williams
      </h1>
    </section>
  </aside>
</div>

      <footer class="footer">
  <small>
    <a href="http://railstutorial.org/">Rails Tutorial</a>
    by Michael Hartl
  </small>
  <nav>
    <ul>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
      <li><a href="http://news.railstutorial.org/">News</a></li>
    </ul>
  </nav>
</footer>
      <pre class="debug_dump">--- !ruby/hash:ActionController::Parameters
action: show
controller: users
id: &#39;1&#39;
</pre>
    </div>
  </body>
</html>

Would really appreciate some help on this to get past this issue.

Thanks in advance, and please let me know if I can provide anymore information.


I changed the order of directives in app/assets/javascripts/application.js to: //= require jquery //= require jquery_ujs //= require bootstrap //= require_tree .

Worked like a charm :)

bootstrap drop down-menu not working with rails, Recently, a trainee learning bootstrap comes to me for help asking why the bootstrap drop down menu not working. It took me about 20 minutes  If you read Bootstrap's Dropdown JS code, you'll see it adds a click listener to toggle the dropdown menu. If you run this code twice, you're adding two click listeners. So on every click, those two listeners open the menu and suddenly close it again.


What I was able to determine was the issue was 2 rouge js files that I had placed in the assets/javascript directory. Namely, bootstrap.js and bootstrap.min.js. Once I removed these files the dropdown was working again.

bootstrap dropdown menu not working · Issue #14 · railstutorial , hi, i am a beginner and doing the rails tutorial twitter app. My bootstrap dropdown menu is not working. When i do the rspec test, its pass. Bootstrap - dropdown menu not working? Ask Question This is a Rails specific answer, but I had this same problem with Bootstrap dropdown menus in my Rails app


you can try to call it via javascript adding :

<script>
   $('.dropdown-toggle').dropdown()
</script>

at the botton of your _header file.

hope helps!

Why isn't the Boostrap Dropdown not working in the menu after , Why isn't the Boostrap Dropdown not working in the menu after loging in ? It's your standard bootstrap dropdown, so double check and make sure there are no JS errors in the Want to stay up-to-date with Ruby on Rails? bootstrap drop down-menu not working with rails Recently, a trainee learning bootstrap comes to me for help asking why the bootstrap drop down menu not working. It took me about 20 minutes to figure out the issue. As usual first I tried to see that the HTML structure or markup of menu as required by Bootstrap dropdown.


The problem is bootstrap's javascript. Sometimes is loaded two times.

This works to me:

application.js:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap

application.scss: Don't use //= require in scss files

@import "*";
@import "bootstrap";
@import "font-awesome";

Then:

rake assets:clean
rake assets:precompile 

OR

Put bootstrap.js in assets/javascripts folder and put //= require_tree . line

Dropdown menu does not work - Rails, My bootstrape dropdown menu not working. I have no idea why? Gemfile contain​: ruby “1.9.3” gem 'rails', '3.2.16' gem 'bootstrap-sass', '2.1'  hi, i am a beginner and doing the rails tutorial twitter app. My bootstrap dropdown menu is not working. When i do the rspec test, its pass. But the dropdown menu is not working. please help me. thanks in advance


Using a later version of rails (5.2.3) I found that the instructions given in the book didn't work. The console warned me that jQuery needed to be installed, and by going to https://github.com/rails/jquery-rails I was able to find the instructions to get it up-and-running.

Add to the Gemfile:

gem 'jquery-rails'

Add to application.js

//= require jquery
//= require bootstrap

So that the whole Gemfile is

//= require rails-ujs
//= require activestorage
//= require jquery
//= require bootstrap
//= require turbolinks
//= require_tree .

ruby - Dropdown menu not showing/working on rails, I have found the answer to the problem. Adding the Bootstrap JavaScript library to application.js. app/assets/javascripts/application.js. Participate in discussions with other Treehouse members and learn. BOOTSTRAP: Dropdown menu not working. which will be used to link to drop down menu using


ruby on rails twitter bootstrap drop down suddenly not working , I found that dropdown js being loaded twice into the asset pipeline seems to open and close the dropdown menu instantly, but would work fine in Heroku/  Some facts I discovered on my Ubuntu + ruby 1.9.3 + rails 3.2.7 + twitter-bootstrap-rails 2.1.1: Changing order of inclusions breaks development mode, so did not changed it.


Bootstrap 4 not working with Ruby on Rails 5 - Help, bootstrap 4 is not working with my ruby on rails 5 app. i have added all the class="dropdown-toggle" data-toggle="dropdown" role="button"  When I am re-sizing the browser window toggle button is working fine and dropdown menu is coming properly but the dropdown-submenu is not working in 1024 resolution or in any small size window,


Integrating Bootstrap 4 into Rails 6 · Rob Race, This problem is easy to fix, just supply the command line with the environment <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right"> <a  FWIW when I have problems like this I usually open Firebug (if Firefox) or "View Developer Tools" in Chrome, and check to see if there are javascript console errors, and check the network tab to see if bootstrap-dropdown.js is being loaded, etc.