CODEWITHSUNDEEP
jqueryruby-on-railsdatatabledatatables
Sauron
Sauron

Reputation: 6657

Datatables Not Activating in Rails - proper asset pipeline setup

I was following the railscasts for building a datatable at: http://railscasts.com/episodes/340-datatables?autoplay=true

Following all steps, the table still renders the same as before, static html:

enter image description here

I am using bootstrap all with many other gems previously but datatables would add allot to the usability of the application.

I have posted the code that I am presently using,

What may be wrong? Is there a way to debug javascript in a rails app instead of doing things blindly?

manage.html.erb (Note: in the Locations view folder):

<% if @restaurant.locations.any? %>
    <h1>Manage <%= @restaurant.name.pluralize %> Restaurant Locations</h1>

    <table id="restaurantLocations">
    <thead>
        <tr>
            <th>Store Number</th>
            <th>Address</th>
            <th>City</th>
            <th>State</th>
            <th>Nearest Bidding City</th>
            <th>Zip Code</th>
            <th>Sit Down?</th>
            <th>Drive Through?</th>
        </tr>
    </thead>
    <%# current_user.locations.each do |branch| %>
    <tbody>
      <% @restaurant.locations.each do |branch| %>
            <tr>
                <td><%= branch.store_number %></td>
                <td><%= branch.address %></td>
                <td><%= branch.city_name %></td>
                <td><%= branch.state.upcase %></td>
                <td><%= Metro.where(id: branch.city_id).pluck(:city).first %></td>
                <td><%= branch.zip %></td>
                <td><%= branch.sit_down %></td>
                <td><%= branch.drive_through %></td>
            </tr>
        <% end %>
    </tbody>
    </table>
<% else %>

    <h1>Upload <%= @restaurant.name.pluralize %> Restaurant Locations</h1>
    <p>Simply format your CSV file as the sample:(INSERT EXAMPLE) and upload</p>
<% end %>

<h2>Import Restaurants</h2>

<%= form_tag import_locations_path(id: @restaurant.id), multipart: true do %>
    <%= file_field_tag :file %>
    <%= submit_tag "Import" %>
<% end %>

application.js:

//= require jquery
//= require jquery_ujs
//= require chosen-jquery
//= require bootstrap
//= require dataTables/jquery.dataTables
//= require dataTables/bootstrap/2/jquery.dataTables.bootstrap
//= require turbolinks
//= require bootstrap-datepicker
//= require raphael
//= require morris
//= require underscore
//= require gmaps/google
//= require_tree .

applcation.css:

*
 *= require_self
 *= require chosen
 *= require bootstrap-datepicker
 *= require dataTables/jquery.dataTables
 *= require dataTables/bootstrap/2/jquery.dataTables.bootstrap
 *= require_tree .
 */

locations.js.coffee:

jQuery ->
    $("#restaurantLocations").dataTable();

gemfile:

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

Upvotes: 0

Views: 159

Answers (1)

Sauron
Sauron

Reputation: 6657

The asset pipeline was not loading the assets for locations.js.coffee. I solved the problem by explicitly adding //= require 'locations' to application.js file and it all works now:

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery-ui
//= require dataTables/jquery.dataTables
//= require bootstrap
//= require dataTables/bootstrap/2/jquery.dataTables.bootstrap
//= require chosen-jquery
//= require bootstrap-datepicker
//= require raphael
//= require morris
//= require underscore
//= require gmaps/google 
//= require 'locations'     <- What I added
//= require_tree .

Upvotes: 2

Related Questions