Bootstrap 4 Not Working Correctly

lwaters

The tables appear fine but, when I add additional code required to make my Bootstrap Navigation work, the tables don't work anymore. Here is the code that I need to add before the </body> tag to make the navigation work:

Any advice would be appreciated. Thanks

Lisa

kthorngren

Something happened that your code is not showing. The best thing to do is post a link to your page or create a test case so we can see the issue and help debug.

the tables don't work anymore.

Not sure what this means but typically when the Datatables don't display properly you will find a Javascript error occurring. Do you have any errors in your browser's console?

Kevin

lwaters

Here is a link to the page:

https://secure1.cpsd.us/sdpc/district_search.php?districtID=482&state=MA

Logged in users see a drop-down bootstrap navigation. When I add the code for that the datatables stops working.

kthorngren

In your browser's console I see these errors:

jquery.dataTables.min.js:5 Uncaught ReferenceError: jQuery is not defined
    at jquery.dataTables.min.js:5
    at jquery.dataTables.min.js:5
(anonymous) @ jquery.dataTables.min.js:5
(anonymous) @ jquery.dataTables.min.js:5
dataTables.bootstrap4.min.js:5 Uncaught ReferenceError: jQuery is not defined
    at dataTables.bootstrap4.min.js:5
    at dataTables.bootstrap4.min.js:5
(anonymous) @ dataTables.bootstrap4.min.js:5
(anonymous) @ dataTables.bootstrap4.min.js:5
VM31 district_search.php:76 Uncaught ReferenceError: $ is not defined
    at VM31 district_search.php:76

When viewing the page source you are loading datatables.min.js on line 68. However it doesn't look like you've loaded jQuery yet. You are loading jquery-3.3.1.slim.min.js in line 960. This along with bootstrap.min.js need to be loaded before Datatables and Datatables' Bootstrap integration files.

Kevin