couldn't find file 'dataTables/jquery.dataTables' Rails 4

Question

I'm following the rails casts #340 to implement data tables in my application.

Following all the steps I get this error: couldn't find file 'dataTables/jquery.dataTables'

I'm using rails 4 and I found that some files that mentions in the tutorial I had to create like application.css and products.js.coffee

Gemfile

gem 'jquery-rails'
group :assets do 
  gem 'jquery-datatables-rails', github: 'rweng/jquery-datatables-rails'
  gem 'jquery-ui-rails'
end

Application.js

//= require jquery
//= require dataTables/jquery.dataTables
//= require_tree .

Application.js.coffee

 /* 
 * This is a manifest file that'll automatically include all the stylesheets available in this directory 
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at 
 * the top of the compiled file, but it's generally better to create a new file per style scope. 
 *= require_self 
 *= require dataTables/jquery.dataTables 
 *= require_tree .  
*/  

and as is rails 4 I've added the call to the stylesheet in the /layouts/application.html.erb

<%= stylesheet_link_tag 'application.css', media: 'all' %>

and the products/index.htm.erb

<table class="table table-normal" id="products" >
  <thead>
    <tr>
                      <td>Code</td>
                      <td>Name</td>
                      <td>Description</td>
                      <td>Price</td>
                      <td>Stock</td>
                      <td>Enabled</td>
                      <td>Company</td>
              </tr>

  </thead>

  <tbody>   

    <% @products.each do |product| %>
      <tr>                          
            <td style="text-decoration: underline;"><%= link_to product.code, edit_product_path(product) %></td>             

            <td><%= product.name %></td>             

            <td><%= product.description %></td>              

            <td><%= product.price %></td>              

            <td><%= product.stock %></td>              

            <td><%= product.enabled %></td>              

            <td><%= product.company_id %></td>              

      </tr>
    <% end %>
  </tbody>
</table>

I get this error in the output

couldn't find file 'dataTables/jquery.dataTables' (in ....app/assets/stylesheets/application.css:6)

Any ideas how to solve this? Thanks in advance

Answer 1

There's no more :assets group in Rails 4, so just get the gems out of that block.

Answer 2

Take a look at this related question. I ran into a similar issue recently, and my findings may help you out.

I saw that you mentioned you had to create an application.css file, but you didn't indicate whether you populated it with anything. You could try adding:

*= require jquery.dataTables

to application.css and including a copy of jquery.dataTables.css at .app/assets/datatables, which then gives you the added bonus of being able to style DataTables to match the rest of your app.

Making these changes will resolve the "couldn't find file" error, since Rails is looking for a CSS file that either: a) does not exist; or b) does not exist at the location specified in your application.css file.

Also, you should not be adding a stylesheet_link_tag to your application.html.erb file. The whole point of the asset pipeline is that turbolinks will add assets (like stylesheets) to your pages based on what you've specified in your application.css.