Precompiling rails-3 assets pipeline, makes javascript failing, preventing heroku deploy

Question

I use datatables js on rails-3.2.3/bootstrap application, to sort table's fields.

If I run the app locally without precopiling assets pipeline, it works fine but, as soon I run :

RAILS_ENV=production bundle exec rake assets:precompile

the resulting public/assets prevent DataTables plug-in to work, even if it appear correctly packaged into public/assets/manifest.yml file and public/assets directory :

lsoave@ubuntu:~/rails/github/gitwatcher$ ls -l app/assets/javascripts
total 84
-rw-rw-r-- 1 lsoave lsoave   553 2012-04-27 21:36 application.js
-rw-rw-r-- 1 lsoave lsoave    99 2012-04-20 21:37 bootstrap.js.coffee
-rw-rw-r-- 1 lsoave lsoave  3387 2012-04-26 20:12 DT_bootstrap.js
-rw-rw-r-- 1 lsoave lsoave 71947 2012-04-26 20:12 jquery.dataTables.min.js
lsoave@ubuntu:~/rails/github/gitwatcher$ 

either application.js looks right :

app/assets/javascripts/application.js:

//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require DT_bootstrap
//= require jquery.dataTables.min
//= require_tree .

Of course this is even more problematic because it prevent rails app to work on heroku ( I can compile the app from scratch, or use the locally precompiled version, but they don't work anyway ).

How can I do ?

Answer 1

I just got it working myself. Are you using the jquery-datatables-rails gem? If not, you should! Put this line in your gemfile:

gem 'jquery-datatables-rails', github: 'rweng/jquery-datatables-rails'

and run:

bundle install

NOTE: Don't put it in your assets group or it will not work when deploying to heroku (since the assets group is not used in production).

Also, make sure to put this line in your application.rb:

config.assets.initialize_on_precompile = false

Add these to your application.js

//= require dataTables/jquery.dataTables
//= require dataTables/jquery.dataTables.bootstrap

Add this to your application.css:

 *= require dataTables/jquery.dataTables.bootstrap

And add this to your js.coffee file for your controller you are using datatables in:

If you are using fluid containers:

#// For fluid containers
$('#dashboard').dataTable({
  "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
  "sPaginationType": "bootstrap"
});

If you are using fixed width containers:

#// For fixed width containers
$('.datatable').dataTable({
  "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
  "sPaginationType": "bootstrap"
});

Answer 2

There could be a few reasons this doesn't work. Best bet is start here:

http://www.neilmiddleton.com/heroku-asset-pipeline-faq/