title: Uncaught ReferenceError: $ is not defined With Ruby on Rails
body: <p>I'm new to Ruby on Rails, and I'm trying to get ajax to work with a ajax tutorial on Tutorialspoint. But even after I include 'jquery-rails' gem into gemfile and use 'bundle install' command I still get "Uncaught ReferenceError: $ is not defined" error in my browser console, and ajax function doesn't work.
  I still have to refresh the page to see the result.<br>
  (I generated the codes with scaffold)</p>
  
  <p>my index.view.erb</p>
  
  <pre><code>
  &lt;h1&gt;Ponies&lt;/h1&gt;
  
  &lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Name&lt;/th&gt;
        &lt;th&gt;Description&lt;/th&gt;
        &lt;th colspan="3"&gt;&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
  
    &lt;tbody&gt;
      &lt;% @ponies.each do |pony| %&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;%= pony.name %&gt;&lt;/td&gt;
          &lt;td&gt;&lt;%= pony.description %&gt;&lt;/td&gt;
          &lt;td&gt;&lt;%= link_to 'Show', pony %&gt;&lt;/td&gt;
          &lt;td&gt;&lt;%= link_to 'Edit', edit_pony_path(pony) %&gt;&lt;/td&gt;
          &lt;td&gt;&lt;%= link_to 'Destroy', pony, method: :delete, data: { confirm: 'Are you sure?' }, :remote =&gt; true, :class =&gt; 'delete_pony' %&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;% end %&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;br&gt;
  
  &lt;%= link_to 'New Pony', new_pony_path %&gt;
  
  </code></pre>
  
  <p>my destroy.js.erb</p>
  
  <pre><code>$('.delete_pony').bind('ajax:success', function() {
    $(this).closest('tr').fadeOut();
  });
  </code></pre>
  
  <p>my ponies_controller.rb</p>
  
  <pre><code>...
  
  def destroy
      @pony.destroy
      respond_to do |format|
        format.html { redirect_to ponies_url, notice: 'Pony was successfully destroyed.' }
        format.json { head :no_content }
        format.js { render :layout =&gt; false }
      end
    end
  
  ...
  </code></pre>
  
  <p>gemfile</p>
  
  <pre><code>...
  
  gem 'jquery-rails'
  
  ...
  </code></pre>
  
  <p>browser console</p>
  
  <pre><code>Uncaught ReferenceError: $ is not defined
      at &lt;anonymous&gt;:1:1
      at processResponse (rails-ujs.js:283)
      at rails-ujs.js:196
      at XMLHttpRequest.xhr.onreadystatechange (rails-ujs.js:264)
  </code></pre>
  
  <p>application.js</p>
  
  <pre><code>// This file is automatically compiled by Webpack, along with any other files
  // present in this directory. You're encouraged to place your actual application logic in
  // a relevant structure within app/javascript and only use these pack files to reference
  // that code so it'll be compiled.
  
  require("@rails/ujs").start()
  require("turbolinks").start()
  require("@rails/activestorage").start()
  require("channels")
  
  
  // Uncomment to copy all static images under ../images to the output folder and reference
  // them with the image_pack_tag helper in views (e.g &lt;%= image_pack_tag 'rails.png' %&gt;)
  // or the `imagePath` JavaScript helper below.
  //
  // const images = require.context('../images', true)
  // const imagePath = (name) =&gt; images(name, true)
  
  //= require jquery
  //= require jquery_ujs
  
  </code></pre>