CODEWITHSUNDEEP
javascriptjquerycssruby-on-rails
Sachin
Sachin

Reputation: 277

Bootstrap Navbar dropdown not working Rails

Whenever I click on it it just redirects me by adding a '/#' to the end of my route. There are not jquery errors in the console log when I click the drop down. Here's my applicaiton.js:

//
//= jquery
//= jquery-ui
//= popper
//= bootstrap-sprockets
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree

I have the JQuery-Rails gem along with jquery-ui-rails. The console log shows now errors with jquery/javascript when I click on the dropdown either. Here's my server logs:

Started GET "/" for 127.0.0.1 at 2018-12-25 14:06:27 -0500
Processing by StaticController#homepage as HTML
  User Load (0.4ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2  [["id", 1], ["LIMIT", 1]]
  ↳ /Users/sohel/.rvm/gems/ruby-2.5.1/gems/activerecord-5.2.2/lib/active_record/log_subscriber.rb:98
  Rendering static/homepage.html.erb within layouts/application
  Rendered static/homepage.html.erb within layouts/application (0.7ms)
  Rendered shared/_nav.html.erb (0.5ms)
Completed 200 OK in 47ms (Views: 41.2ms | ActiveRecord: 0.4ms)

Here's the view erb file for the navbar component. It was basically taken directly off the bootstrap website:

<nav class="navbar navbar-expand-lg navbar-light bg-light custom-nav">
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <%= link_to 'Home', root_path, class: 'nav-link' %>
      </li>
      <li class="nav-item">
        <%= link_to 'Time Entries', posts_path, class: 'nav-link' %>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

Upvotes: 1

Views: 3651

Answers (2)

rewritten
rewritten

Reputation: 16435

Setting an explicit href ("#") will make your browser change the url fragment, you can remove it (<a href class="..." ...>) and the browser wont try to follow it. 

<a
  class="nav-link dropdown-toggle"
  href 
  id="navbarDropdownMenuLink" 
  data-toggle="dropdown" 
  aria-haspopup="true" 
  aria-expanded="false"
>
  Dropdown link
</a>

On the other side, the drop down should toggle. Check the network inspector and ensure you are actually loading the application JavaScript at all.

UPDATE

There is an error in your application.js file. The libraries are just named and not required. It should read:

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

(also notice the dot at the end of require_tree line)

Upvotes: 2

Sachin
Sachin

Reputation: 277

I found the answer here

Had to add the following script tags under my closing body tag, in my application.html.erb layout file:

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Upvotes: 2

Related Questions