Rails: Javascript dropdown not loading when clicked on. Uncaught ReferenceError: jQuery is not defined.

Question

when i clicked on my javascript dropdown, the dropdown couldn't load. I am using Rails 5.1.2, Ruby, 2.4.1, and the gem 'jquery-rails'

HTML in _header.html.erb

<li 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><%= link_to "Change Password?", new_password_reset_path %></li>

Application.js

//= require rails-ujs
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .

Not sure what the problem is.

Answer 1

Uncaught ReferenceError: jQuery is not defined.

Jquery need to be the first script when you import. Try changing the content of application.js to below

#application.js
//= require jquery
//= require jquery_ujs
//= require rails-ujs
//= require bootstrap
//= require_tree

Notice that the order has been changed.