Search code examples
jqueryruby-on-rails-4twitter-bootstrap-3tablesorterturbolinks

Uncaught TypeError with jquery tablesorter (Rails, Turbolinks)


I'm experiencing some weird behavior with the Rails app I'm developing. I'm trying to use the jquery-tablesorter gem with mixed success. Basically, the page I've created keeps giving me the following error in the console after the page lods:

Uncaught TypeError: $(...).tablesorter is not a function
(anonymous function) @ VM604:4
m.Callbacks.j @ jquery.min.js:2
m.Callbacks.k.add @ jquery.min.js:2
m.fn.ready @ jquery.min.js:2
(anonymous function) @ VM604:2
executeScriptTags @ turbolinks.js?body=1:227
changePage @ turbolinks.js?body=1:197
xhr.onload @ turbolinks.js?body=1:107

The weird thing is that if I refresh the page once it is open and has displayed the error, then everything works fine with no errors in the console. I'm guessing that somehow the jquery libraries aren't loading before the jquery-tablesorter. Further more, I suspect that this has something to do with turbolinks, because I was getting a similar error before with the twitter-boostrap-rails gem, but was able to fix it by reordering my application.js file. But nothing I do seems to fix this error. Here's the current state of my application.js file:

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs  
//= require twitter/bootstrap
//= require bootstrap-switch
//= require jquery-tablesorter
//= require_tree .
//= require turbolinks

Any suggestion to fix the error are appreciated.


Solution

  • Well... turns out I had a rogue <script> tag at the bottom of one of my pages from when I was trying to play around with Google OAuth Sign-In. That <script> tag was calling an old version of jquery, which conflicted with the version that should have been loading from my application.js file.

    Anyway, took out the rogue script tag, and it fixed everything. Just for reference this is the final version of the application.js file

    //= require jquery
    //= require jquery_ujs
    //= require twitter/bootstrap
    //= require_tree .
    //= require bootstrap-switch
    //= require jquery-tablesorter
    //= require turbolinks
    

    I think other orders might work too, but for now this isn't causing me any problems.