title: How can I fix a Navbar drop-down menu in Ruby on Rails that does not show any of the items
body: <p>I've just started developing a webpage with a Navbar that has a drop-down menu to the right so as one has to click on the trigger to display the drop-down content, the problem is none of the content items is been displayed.  </p>
  
  <p>I'm using materialize for the front-end design, but I have also tried bootstrap for the same Navbar purpose but it also didn't display the items</p>
  
  <p>(app/views/layouts/application.html.erb)</p>
  
  <pre><code>&lt;%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %&gt;
  &lt;%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;!-- Dropdown Structure --&gt;
  
  &lt;ul id="dropdown1" class="dropdown-content"&gt;
    &lt;li&gt;&lt;a href="#!"&gt;My Profile&lt;/a&gt;&lt;/li&gt;
    ... 
  &lt;/ul&gt;
  
  &lt;ul id="dropdown2" class="dropdown-content"&gt;
    &lt;li&gt;&lt;a href="#!"&gt;My Profile&lt;/a&gt;&lt;/li&gt;
    ...
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;nav class="brown lighten-4 z-depth-z"&gt;
  &lt;div class="container"&gt;
    &lt;div class="nav-wrapper"&gt;
      &lt;a href="#!" class="brand-logo"&gt;Logo&lt;/a&gt;
  
      &lt;a href="#" data-target="mobile-demo" class="sidenav-trigger"&gt;&lt;i class="material-icons"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;ul class="right hide-on-med-and-down"&gt;
        &lt;li&gt;&lt;a href="#"&gt;Courses&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Sign Up&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Login&lt;/a&gt;&lt;/li&gt;
        &lt;!-- Dropdown Trigger --&gt;
        &lt;li&gt;&lt;a class="dropdown-trigger" href="#!" data-target="dropdown1"&gt;John Doe&lt;i class="material-icons right"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;  
      &lt;/ul&gt;
  
      &lt;ul class="sidenav" id="mobile-demo"&gt;
        &lt;li&gt;&lt;a href="#"&gt;Courses&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Sign Up&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Login&lt;/a&gt;&lt;/li&gt;
        &lt;!-- Dropdown Trigger --&gt;
        &lt;li&gt;&lt;a class="dropdown-trigger" href="#!" data-target="dropdown2"&gt;John Doe&lt;i class="material-icons right"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;  
      &lt;/ul&gt;
    &lt;/div&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;script&gt;
    $('.sidenav').sidenav();
    $(".dropdown-trigger").dropdown();
  &lt;/script&gt;
  </code></pre>
  
  <p>(app/assets/stylesheets/application.scss)</p>
  
  <pre><code> @import "materialize";
  </code></pre>
  
  <p>(app/assets/javascripts/application.js)</p>
  
  <pre><code> //= require jquery
   //= require materialize-sprockets
   //= require turbolinks
   //= require_tree .
  </code></pre>
  
  <p>(Gemfile)</p>
  
  <pre><code># materialize Sass 
  gem 'materialize-sass'
  
  # Jquery 
  gem 'jquery-rails'
  </code></pre>
  
  <p>When I click the trigger to drop the items(in this case John Doe),</p>
  
  <p>I get this error on the console:</p>
  
  <pre><code>       Uncaught ReferenceError: $ is not defined
  at &lt;anonymous&gt;:2:5
  at o.assignNewBody (turbolinks.js:604)
  at o.replaceBody (turbolinks.js:542)
  at turbolinks.js:535
  at o.e.renderView (turbolinks.js:495)
  at o.render (turbolinks.js:533)
  at Function.e.render (turbolinks.js:493)
  at t.renderSnapshot (turbolinks.js:690)
  at t.render (turbolinks.js:686)
  at r.render (turbolinks.js:940)
  </code></pre>