I have a new-ish rails app on heroku. It's using rails 6.1 and ruby 3.1.1. I could not get webpack to work. It wouldn't let me deploy to Heroku. I went down that rabbit hole for 2+ days and could not get it to work.
So, I removed webpacker and can now deploy to heroku. But it seems that some javascript files are not seen or not being loaded into my app. Specifically, I'm trying to get jquery.dataTables.js to load.
I'm also using datepicker and that works just fine. That might just be a part of the basic jQuery.
"I believe" I understand how rails sees the javascript files and loads them, but I'm missing something.
Datatables isn't working. I thought rails would include/load the js and css files automatically. Since it wasn't working, I Googled and found a thread that said I could add the files manually into my assets/.
I got the dataTables css and js code from the web. I copy/pasted them into files: app/assets/javascripts/jquery.dataTables.js and app/assets/stylesheets/jquery.datatables.css. Rails docs says it also looks in apps/assets/datatables/ for js files so I added a copy of the datatables.js there. I know I don't need both, but I did this just to see if it will work.
I don't know how to see if the javascript is loading or not. I know rails bundles it all into one file. Using alert() in js in a view works, so the basic js is loading, but it seems like the datatables.js is not.
Any help would be appreciated.
My Code:
@ Gemfile
...
gem 'sprockets', '~> 4.2'
# Use jquery as the JavaScript library
gem 'jquery-rails'
gem 'jquery-ui-rails', '~> 5.0.4'
gem 'jquery-datatables-rails'
gem 'jquery-datatables'
...
# app/assets/config/manifest.js
//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_directory ../javascripts .js
# app/assets/javascripts/application.js
//= require_tree .
//= require jquery3
//= require jquery-ui
//= require jquery_ujs
//= require turbolinks
//= require jquery.dataTables
//= require dataTables/jquery.dataTables
//= require activestorage
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
Rails.start()
Turbolinks.start()
ActiveStorage.start()
# app/assets/stylesheets/jquery.datatables.css
*
*= require_tree .
*= require_self
*= require foundation
*= require jquery-ui
*= require jquery-ui/datepicker
*= require jquery.datatables
*= require dataTables/jquery.dataTables
*= require lmt
*/
Javascript files:
# app/assets/javascripts/datatables/
jquery.datatables.css
jquery.dtatTables.js
# app/assets/javascripts/
jquery.dtatTables.js
CSS Files:
# app/assets/stylesheets/
jquery.datatables.css
In my layouts:
# app/views/layouts/application.html.erb
# and
# app/views/layouts/lmt.html.erb
# both use:
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
And in my view:
# app/views/students/index.html.erb
<table id="students">
...
</table>
$(document).ready(function() {
alert("Students");
$('#students').dataTable( {
"iDisplayLength": 100,
"sPaginationType": "full_numbers",
"bStateSave": true,
"aoColumns": [
/* Student Name */ null,
/* Email */ null
],
"aaSorting": [[ 0, "asc" ]]
});
});
In DeveloperTools (FireFox browser), in the Console tab, I see:
Uncaught TypeError: $(...).dataTable is not a function....
In DeveloperTools >> Inspector tab, I see the <head></head> tags. In there I see:
<head>
<link rel="stylesheet" media="all" href="/assets/application.debug-15..12af.css" data-turbolinks-track="reload">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
...
<link rel="stylesheet" type="text/css" href="/mini-profiler-resources/includes.css?v=35a79b300ab5afa978cb59af0b05e059">
<script async="" type="text/javascript" src="/mini-profiler-resources/vendor.js?v=35a79b300ab5afa978cb59af0b05e059"></script>
</head>