Example of how to use modal() in responsive plugin

tacman1123

I'm initializing a datatable with responsive:

            responsive: {
                details: {
                    display: DataTable.Responsive.display.modal({
                        header: function (row) {
                            var data = row.data();
                            return 'Details for ' + data.clientName;
                        }
                    })
                }
            },

But getting this error.

TypeError: Cannot read properties of undefined (reading 'Modal')
at t.modal (datatables.net-responsive-bs5.index-fd0d3a3c3f10af6def32967b788440c9.js:11:441)
at t.initDataTable (api_grid_controller-7eead593ee7c60db742f6a87911c9ff7.js:457:64)

I suspect this is related to jQuery, but bootstrap has its own modal.

The exact error happens here on the 2nd line

t.modal = function(d) {
    return o || (o = new s.Modal(i[0])),
    function(a, t, s, l) {
        if (e.fn.modal) {
            var m = s();
            if (!1 === m)
                return !1;
            if (t) {
                if (!e.contains(document, i[0]) || a.index() !== i.data("dtr-row-idx"))
                    return null;
                i.find("div.modal-body").empty().append(m)
            } else {
                if (d && d.header) {
                    var r = i.find("div.modal-header")
                      , p = r.find("button").detach();
                    r.empty().append('<h4 class="modal-title">' + d.header(a) + "</h4>").append(p)
                }
                i.find("div.modal-body").empty().append(m),
                i.data("dtr-row-idx", a.index()).one("hidden.bs.modal", l).appendTo("body").modal(),
                o.show()
            }
            return !0
        }

kthorngren

This example works. It uses BS 3 so I decided to try your code snippet with BS 5:
https://live.datatables.net/qixigise/1/edit

The modal still works. The problem is something specific with your environment. Please post a link to a test case replicating the error:
https://www.datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

tacman1123

Thanks. Go to https://dt-demo.survos.com/congress/api_grid and open up the console.

All of the libraries come from jsdelivr, which is a bundler that gets its packages from npm. I can't use the cdn.datatables.net because of the way importmap works.

I'd prefer not to jQuery in my code, I'm pleased to see the documentation changing to vanilla-js first.

Thanks for looking at this!

kthorngren

I'm not familiar with your environment (I prefer the old fashioned script tags ) nor how to set it up. @allan might be able to help. I did a quick debug and know where the problem is but not sure how to fix it.

var o, t = a.Responsive.display, n = t.modal, i = e('<div class="modal fade dtr-bs-modal" role="dialog"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"/></div></div></div>'), s = window.bootstrap;
a.Responsive.bootstrap = function(d) {
    s = d
}
,
t.modal = function(d) {
    return o || (o = new s.Modal(i[0])),

The statement s = window.bootstrap;, at the end of line 1 in the snippet, shows s as undefined. Not sure if there is something with the imports that needs changed for s = window.bootstrap; to work. Highlighting it in case you know.

Kevin

tacman1123

I tried

import bootstrap from 'bootstrap'; // bootstrap javascript
window.bootstrap = bootstrap;

but that didn't help.

allan

The error certainly is that window.bootstrap is not defined. Looking at the page (thanks for that), there is no window.bootstrap when Responsive initialises. I wonder if your import and setting it to be global is happening after the Responsive include perhaps?

I probably need to find a way to allow Bootstrap to be passed into Responsive for use like this.

Allan

tacman1123

I tweaked/hacked this with no luck.

import bootstrap from 'bootstrap'; // bootstrap javascript
window.bootstrap = bootstrap;

import DataTables from "datatables.net-bs5";
import '../datatables-plugins.js';

The plugins are in a separate file

import 'datatables.net-select-bs5';
import 'datatables.net-searchpanes-bs5';
import 'datatables.net-searchbuilder-bs5';
import 'datatables.net-buttons-bs5';
import 'datatables.net-select-bs5';
import 'datatables.net-responsive-bs5';
import 'datatables.net-scroller-bs5';

import 'datatables.net-bs5/css/dataTables.bootstrap5.min.css';
import 'datatables.net-searchpanes-bs5/css/searchPanes.bootstrap5.min.css';
import 'datatables.net-searchbuilder-bs5/css/searchBuilder.bootstrap5.min.css';
import 'datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css';
import 'datatables.net-scroller-bs5/css/scroller.bootstrap5.min.css';
import 'datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css';

Everything is loaded through importmaps (via jsdelivr), and I think the error is happening pretty early, because it fails before even parsing the script. I put a console.log file in the midst of the imports, which isn't showing up.

I can give you setup instructions to re-create this locally if you'd like.

allan

Ah. Try this:

import bootstrap from 'bootstrap';
import DataTables from "datatables.net-bs5";
import DataTables from "datatables.net-responsive-bs5";
// etc etc

DataTable.Responsive.bootstrap( bootstrap );

Allan

tacman1123

same error. I hacked in a few more imports, but they didn't help.

import DataTables from "datatables.net-bs5";
import '../datatables-plugins.js';
import { Modal } from 'bootstrap'
import bootstrap from 'bootstrap'; // bootstrap javascript
window.bootstrap = bootstrap;
DataTables.Responsive.bootstrap( bootstrap );

I didn't publish these to the site though.

tacman1123

I saw this and thought it might be related:

https://stackoverflow.com/questions/68084742/dropdown-doesnt-work-after-modal-of-bootstrap-imported

But even adding an explicit import of Modal didn't help

import DataTables from "datatables.net-bs5";
import '../datatables-plugins.js';
// https://stackoverflow.com/questions/68084742/dropdown-doesnt-work-after-modal-of-bootstrap-imported
import Modal from 'bootstrap/js/dist/modal';
import bootstrap from 'bootstrap'; // bootstrap javascript
window.bootstrap = bootstrap;
DataTables.Responsive.bootstrap( bootstrap );

allan

I think you need to import Bootstrap like this:

import * as bootstrap from 'bootstrap';

This example is what I would expect to work, but there are a few issues:

1. It doesn't show the modal. I'm not sure why not yet! I need to dig into that tomorrow.
2. There are a few Typescript errors I need to address.

Allan

allan

I've just tagged and released Responsive 3.0.1 which addresses the issues raised above.

This is the updated StackBltiz which shows it working correctly now

Allan

tacman1123

Yep, that works, thanks!!