Bootstrap 4 Not Working Correctly

Bootstrap 4 Not Working Correctly

lwaterslwaters Posts: 2Questions: 1Answers: 0

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

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • lwaterslwaters Posts: 2Questions: 1Answers: 0

    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.

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

This discussion has been closed.