title: Where should I place my jQuery code in my Ruby on Rails applications?
body: <p>I'm partially new to RoR and fairly new to jQuery. Currently, I have a working RoR site as a learning platform. I want to include some jQuery basic features to expand my learning (.mouseenter(), .hover(), .fadeIn() etc).</p>
  
  <p>Let me set the scene with some code (I've snipped parts to keep it short):</p>
  
  <pre><code>$ ruby -v
  ruby 1.8.7 (2011-06-30 patchlevel 352) [i686-linux]
  $ rails -v
  Rails 3.2.8
  </code></pre>
  
  <p>Gemfile:</p>
  
  <pre><code>gem 'jquery-rails'
  </code></pre>
  
  <p>config/routes.rb:</p>
  
  <pre><code>root to: 'static_pages#home'
  </code></pre>
  
  <p>app/controllers/static_pages_controller.rb:</p>
  
  <pre><code>def home
      @Presents = Present.all.reverse.take(20)
  end
  </code></pre>
  
  <p>app/views/layouts/application.html.erb:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
      &lt;html&gt;
          &lt;head&gt;
              &lt;title&gt;List&lt;/title&gt;
              &lt;%= stylesheet_link_tag    "application", :media =&gt; "all" %&gt;
              &lt;%= javascript_include_tag "application" %&gt;
              &lt;%= csrf_meta_tags %&gt;
              &lt;%= render 'layouts/shim' %&gt;
          &lt;/head&gt;
          &lt;body&gt;
              &lt;div class="container-narrow"&gt;
                  &lt;%= render 'layouts/header' %&gt;
                  &lt;%= yield %&gt;
              &lt;/div&gt;
          &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>app/assets/javascripts/application.js:</p>
  
  <pre><code>//= require jquery
  //= require jquery_ujs
  //= require bootstrap
  //= require_tree .
  </code></pre>
  
  <p>app/views/static_pages/home.html.erb:</p>
  
  <pre><code>&lt;div class="jumbotron"&gt;
      &lt;h1&gt;Heading&lt;/h1&gt;
  &lt;/div&gt;
  &lt;%= render 'shared/list' %&gt;
  </code></pre>
  
  <p>app/views/shared/_list.html.erb:</p>
  
  <pre><code>&lt;% if @Presents.any? %&gt;
      &lt;%= render partial: 'shared/list_item', collection: @Presents %&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p>app/views/shared/_list_item.html.erb:</p>
  
  <pre><code>&lt;div id="present"&gt;
      &lt;ul id="&lt;%= list_item.id %&gt;"&gt;
          &lt;span class="content"&gt;
              Some content here
          &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Ideally, I want my jQuery to effect the <code>&lt;div&gt;</code> with <code>id="present"</code>. Here is my test jQuery:</p>
  
  <pre><code>$(document).ready(function(){
      $('#present').mouseenter(function(){
          $(this).fadeIn('fast',1);
      }
      $('#present').mouseleave(function(){
          $(this).fadeIn('fast',0.5);
      }
  });
  </code></pre>
  
  <p>Currently, I have the above stored <code>app/views/static_pages/home.js.erb</code> and nothing happens. Is this an appropriate location? Or should I shift it to the <code>app/views/shared/</code> directory?</p>
  
  <p>From my rendered site page - is there a way to check if my jQuery is being included and executed? I feel my current blocking point is the location of my home.js.erb.</p>
  
  <p><strong>Edit: errors detected in my jQuery - corrected below:</strong></p>
  
  <p>jQuery:</p>
  
  <pre><code>$(document).ready(function(){
      $('#present').mouseenter(function(){
          $(this).fadeTo('fast',1);
      });
      $('#present').mouseleave(function(){
          $(this).fadeTo('fast',0.5);
      });
  });
  </code></pre>
  
  <p>and correct use of <code>fadeTo</code>. <code>fadeIn</code> doesn't accept a second argument for opacity as I was trying.</p>