3

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.

Charles
  • 50,943
  • 13
  • 104
  • 142
digijim
  • 676
  • 2
  • 9
  • 20
  • The problem seems to be that "$(document).ready" isn't working, and I suspect it's due to using turbolinks, but [the top two suggested solutions here](http://stackoverflow.com/questions/18770517/rails-4-how-to-use-document-ready-with-turbo-links) aren't working for me either. – digijim Mar 10 '14 at 21:57
  • The "blue" theme is not set as default... maybe you're just missing the theme option: `$('#myTable').tablesorter({ theme: 'blue' });` OR you can just add a `tablesorter-blue` class name to the table. – Mottie Mar 11 '14 at 03:17
  • 1
    Hmm, if you are using a bootstrap theme, then you'll need to do a bit more... [here is a demo](http://jsfiddle.net/abkNM/2192/) of the minimum requirements for a Bootstrap theme. – Mottie Mar 11 '14 at 03:25
  • Two things were causing my issue: 1. I hadn't loaded the appropriate css file into my assets (which would have been "theme.default.css" since I wasn't specifying a theme in my call to the tablesorter function). This would be some handy information to list in the instructions, IMO. 2. For some strange reason (and more to the core of the issue), my app isn't recognizing multiple "jQuery(document).ready" calls from multiple script files. Something new for me to research to solution. But thanks, @Mottie. I'm that much closer to resolution thanks to your help! – digijim Mar 11 '14 at 15:37

2 Answers2

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!

milkman
  • 476
  • 9
  • 11
  • I followed your demo app's behavior, and am now getting tablesorter functionality & styling without the JS/CSS files in my assets. Awesome! Thanks! But the second issue was related to how I had the asset pipeline configured. Will provide my solution as a new answer. – digijim Mar 12 '14 at 18:39
0

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.

digijim
  • 676
  • 2
  • 9
  • 20