title: Why is jquery-tablesorter not working in my Rails 4 app?
body: <p>I'm trying to add jquery-tablesorter functionality to a new app built off of 
  Michael Hartl's Rails Tutorial Sample App, using Ruby 2.1.0p0 and Rails 4.0.2 
  on a Mac (OSX Mavericks), and I'm sure I'm doing something wrong, since the <a href="http://mottie.github.io/tablesorter/docs/index.html#Getting-Started" rel="nofollow">demo code</a> works in my browser.</p>
  
  <p>Following <a href="https://github.com/themilkman/jquery-tablesorter-rails" rel="nofollow">these instructions</a>,
  I added the following line to my Gemfile: </p>
  
  <pre><code>gem 'jquery-tablesorter'
  </code></pre>
  
  <p>and ran </p>
  
  <pre><code>'bundle install'
  </code></pre>
  
  <p>Here's <a href="https://gist.github.com/anonymous/b032b10fb30acfda31b9" rel="nofollow">a Gist</a> of the new contents of my Gemfile.lock.</p>
  
  <p>I added this to my application.js file:</p>
  
  <pre><code>//= require jquery-tablesorter
  </code></pre>
  
  <p>And this to my application.css file:</p>
  
  <pre><code>*= require jquery-tablesorter/theme.blue
  </code></pre>
  
  <p>Copied these files into my app/assets/javascripts folder (although I believe I only need 
  "jquery.tablesorter.js"):</p>
  
  <pre><code>jquery.metadata.js
  jquery.tablesorter.js
  jquery.tablesorter.widgets.js
  </code></pre>
  
  <p>Then followed <a href="http://mottie.github.io/tablesorter/docs/index.html#Getting-Started" rel="nofollow">these instructions</a>, by making my table have an id of "myTable" and a class of "tablesorter"
  and placing this code into my "studios.js" file:</p>
  
  <pre><code>$(function(){
      $("#myTable").tablesorter();
  });
  </code></pre>
  
  <p>But when I view studios/index, I get no sortable headers, and no blue-themed styling.  All
  javascript and css files are loaded successfully, according to my development log.</p>
  
  <p>Here's <a href="https://gist.github.com/anonymous/ae51413a63fc1dba7018" rel="nofollow">a Gist of the page source</a>.</p>
  
  <p>The Rails Tutorial code included a microposts.js file for displaying a running count of 
  available characters remaining in a new micropost:</p>
  
  <pre><code>function updateCountdown() {
          // 140 is the max message length
          var remainder = 140 - jQuery('#micropost_content').val().length;
          jQuery('.countdown').text(remainder + ' characters remaining');
  }
  
  jQuery(document).ready(function($) {
          updateCountdown();
          $('#micropost_content').change(updateCountdown);
          $('#micropost_content').keyup(updateCountdown);
  });
  </code></pre>
  
  <p>I thought, since this javascript uses 'jQuery(document).ready(function($)' rather than 
  '$(document).ready(function()),' as shown in the Getting Started instructions for 
  Tablesorter, and since the microposts.js code functions correctly, I should try changing the studios.js to this:</p>
  
  <pre><code>jQuery(document).ready(function($){
      $("#myTable").tablesorter();
  });
  </code></pre>
  
  <p>But alas, I'm still not getting sortable headers or blue-themed styling.</p>
  
  <p>The instructions at <a href="https://github.com/themilkman/jquery-tablesorter-rails" rel="nofollow">https://github.com/themilkman/jquery-tablesorter-rails</a> don't mention 
  whether any image assets need to be added, nor whether any CSS files need to be 
  stored/edited.  By perusing the theme.blue.css file loaded in my page's source, I can see that the arrow 
  images are encoded, so I believe I shouldn't need them in my app/assets/images folder.<br>
  And since I can view the theme.blue.css file by clicking the link when viewing the page's 
  source, I assume that the blue-themed styling is being loaded, too.</p>
  
  <p>I think I've got all the pieces in place for tablesorter to function, I just can't figure out why none of my table's elements are being updated with tablesorter classes, and therefore none of the sorting functionality and styling is being applied.</p>