Rails 7 and datatables 1.13, "this.each is not a function"

joepmath

I have a problem with Rails 7 and datatables 1.13. Just read this thread:
https://datatables.net/forums/discussion/comment/201478#Comment_201478

This thread links to a repos with an example application:
https://github.com/Vorkosigan76/rails7-datatables2

When I upgrade this example app to datatables 1.13.1 I get this error:

"Uncaught TypeError: this.each is not a function"

Any clue?

gr
Joep

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

A minimal test case, such as using live.datatables.net allows us to efficiently understand the issue, rather than a post to repo that takes time to unpack.

Cheers,

Colin

allan

Details on how to run your Github link would probably do it, assuming it doesn't need some specific database setup.

Allan

joepmath

I was creating a test link and did some more digging. It's working now for 1.13.1!

I was using these fragments:

app/javascript/application.js:
  import "./src/datatables-bs5"

app/javascript/src/datatables-bs5.js:
  import DataTable from "datatables.net-bs5"
  window.DataTable = DataTable();

app/views/posts/index.html.erb:
  <table id='example'>....</table>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      let table = new DataTable('#example');
    });
  </script>

For datatables 1.13.1 I made these changes:

app/javascript/src/datatables-bs5.js:
  import DataTable from "datatables.net-bs5"

app/views/posts/index.html.erb:
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      $('#example').DataTable();
    });
  </script>

Btw... this new setup also works for 1.12.1.

colin

Nice, thanks for reporting back,

Colin

joepmath

In my rails setup (esbuild, bootstrap) datatables does not work with jquery < 3.6.3.

Using 3.6.2:
$('#example').DataTable();

Result in: "Uncaught TypeError: $(...).DataTable is not a function"

allan

Can you give me instructions for how to reproduce that error and I can take a look into it?

Allan

mrpip

I have the same issue running with jquery 3.6.3 and I am using datatables.net-bs4.

I created a barebones Rails 7 App:

rails _7.0.4_ new rails7BStestapp -T --css=bootstrap -j esbuild
cd rails7BStestapp
yarn add jquery datatables.net-bs4

Then created a load_dependencies.js file in app/javascript that looks like:

import jquery from 'jquery'
import DataTable from "datatables.net-bs4"

window.jQuery = jquery
window.$ = jquery
window.DataTable = DataTable();

and finally in app/javascript/application.js I added:

import "./load_dependencies.js"

After creating a simple controller

rails g controller home index

and going to localhost:3000/home/index

In the console I get:

application-ca1281b74271bb2669fc8d31a6756411b650c76d13311ce2fd4b9854109592f0.js:18137 Uncaught TypeError: this.each is not a function
    at DataTable (application-ca1281b74271bb2669fc8d31a6756411b650c76d13311ce2fd4b9854109592f0.js:18137:10)
    at application-ca1281b74271bb2669fc8d31a6756411b650c76d13311ce2fd4b9854109592f0.js:23743:22
    at application-ca1281b74271bb2669fc8d31a6756411b650c76d13311ce2fd4b9854109592f0.js:23744:3

Any ideas?