Why is jquery-tablesorter not working in my Rails 4 app?

Question

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 demo code works in my browser.

Following these instructions, I added the following line to my Gemfile:

gem 'jquery-tablesorter'

and ran

'bundle install'

Here's a Gist of the new contents of my Gemfile.lock.

I added this to my application.js file:

//= require jquery-tablesorter

And this to my application.css file:

*= require jquery-tablesorter/theme.blue

Copied these files into my app/assets/javascripts folder (although I believe I only need "jquery.tablesorter.js"):

jquery.metadata.js
jquery.tablesorter.js
jquery.tablesorter.widgets.js

Then followed these instructions, by making my table have an id of "myTable" and a class of "tablesorter" and placing this code into my "studios.js" file:

$(function(){
    $("#myTable").tablesorter();
});

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.

Here's a Gist of the page source.

The Rails Tutorial code included a microposts.js file for displaying a running count of available characters remaining in a new micropost:

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);
});

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:

jQuery(document).ready(function($){
    $("#myTable").tablesorter();
});

But alas, I'm still not getting sortable headers or blue-themed styling.

The instructions at https://github.com/themilkman/jquery-tablesorter-rails 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.
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.

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.

Answer 1

I was compiling all script files into one with 'require tree .' in my application.js file. I removed that requirement, and instead am including each controller-specific script file from within my application layout file using this line of code:

<%= javascript_include_tag params[:controller], "data-turbolinks-track" => true %>

Now each script file's call to '$(document).ready' is being run correctly, and all behavior is normal.

So it seems to me that the problem wasn't with turbo-links, but rather with my asset pipeline configuration. But this Rails asset pipeline stuff is fairly new territory to me, so feel free to correct me if I'm wrong.

Answer 2

I created a demo for you how to add the tablesorter gem to a plain rails project (especially second commit which adds the important stuff): https://github.com/themilkman/tablesorter-demo Regarding your issues: 1. You should not copy any default JS/CSS files, those come from the gem and get in the rails asset pipeline automatically. 2. This really sounds like turbo-links troubles. I added a gem against this in my example above. Hope this helps!