Rails 7 importmap responsive

jbonany

Dear all,
I have been using DataTables with Rails 7 and importmaps. Everything is working fine. However, when I have tried to use the responsive plug-in, after installing the corresponding js and css files, the datatable start loading but it shows a sort of spinning image and it never finishs to load the datatable. The error that shows is a connection to controller error. Can you provide some clue of why this is happening ?

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

allan

Happy to take a look at a test case showing the issue so I can debug it and provide some assistance.

Allan

jbonany

I do not know how to provide a test case.
Rails 7, datatables, importmap, stimulus controller
Instead, I'm attaching a view of the problem:

importmap:

// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails"
import "controllers"
import "@popperjs/core"
import "bootstrap"
import "jquery"
import "datatables.net"
import "datatables.net-bs5"
import "datatables.net-responsive"
import "datatables.net-responsive-bs5"
import "bootstrap-datepicker"
import "moment"

stimulus controller:

import { Controller } from "@hotwired/stimulus"
import { Turbo } from "@hotwired/turbo-rails"
import $ from 'jquery'
import DataTable from 'datatables.net-bs5'
import 'datatables.net-responsive-bs5';

//Turbo.session.drive = false

// Connects to data-controller="scans"
export default class extends Controller {

connect() {
$('#scans-datatable').DataTable({
stateSave: true,
responsive: true,
processing: true,
serverSide: true,
ajax: {
url: $('#scans-datatable').data('source'),
type: 'GET'
},
columns: [
{
'data': 'lot_name'
},
{
'data': 'date',
'render': DataTable.render.date()
},
{
'data': 'raw_image',
'render': function(data){
if (data == '')
return ""
else
return "<img src =" + data + "width=\"120\" height=\"90\">"
}
},
{
'data': 'processed_image',
'render': function(data, type, row){
if (data == '')
return ""
else
return '<a href="' + '/scans/' + row['DT_RowId'] + '/show_processed_image' + '">'+
'<img src ="' + data + 'width="120" height="90">' +
'</a>'
}
},
{
'data': 'average',
'render': DataTable.render.number( null, '.', 2, null ),
'className': "text-end"
},
{
'data': 'min',
'render': DataTable.render.number( null, '.', 2, null ),
'className': "text-end"
},
{
'data': 'p25',
'render': DataTable.render.number( null, '.', 2, null ),
'className': "text-end"
},
{
'data': 'p50',
'render': DataTable.render.number( null, '.', 2, null ),
'className': "text-end"
},
{
'data': 'p75',
'render': DataTable.render.number( null, '.', 2, null ),
'className': "text-end"
},
{
'data': 'max',
'render': DataTable.render.number( null, '.', 2, null ),
'className': "text-end"
},
{
'data': 'standard_deviation',
'render': DataTable.render.number( null, '.', 2, null ),
'className': "text-end"
},
{
'data': 'show',
'searchable': false,
'sortable': false
},
{
'data': 'edit',
'searchable': false,
'sortable': false
},
{
'data': 'destroy',
'searchable': false,
'sortable': false
}
]
});
}
}

kthorngren

the datatable start loading but it shows a sort of spinning image and it never finishs to load the datatable

Take a look at the browser's console for errors.

Kevin

jbonany

I do not know how to interpret it:

allan

To provide a test case there are a few options:

1. Link to the page you are working on, if you can make it public
2. Use Stackbltiz to create an example showing the issue
3. Create a minimal git repo that demonstrates the issue and link to that.

I don't immediately know what is causing the issue you are seeing, so I would need a test case showing it to be able to diagnose the problem.

Allan