Javascript error from Generator code out of the box

Javascript error from Generator code out of the box

dmartin@mccno.comdmartin@mccno.com Posts: 5Questions: 1Answers: 0

Link to test case: https://api.mccno.com/test2/key_sheet_rows.html
Debugger code (debug.datatables.net): akotal
Error messages shown: editor.bootstrap4.min.js:4 TypeError: d(...).one(...).one(...).appendTo(...).modal is not a function
Description of problem: Code generated at https://editor.datatables.net/generator/
Only edits made were to php/lib/config.php to get db access.

Options selected:
Styling: Bootstrap 4
Software: DataTables, Editor, Buttons, Column visibility, HTML5 export, Print view, DateTime, Responsive, Select, StateRestore, Bootstrap 4, jQuery 3, Moment, JSZip, pdfmake

PHP/mySQL

The data loads. The Delete and Update buttons work but the modal UI never appears and there is a JS error regarding the modal. jQuery is not loaded twice unless the Generator has a second copy wrapped in one of the includes?

I have generated the download twice with the same result. Edge, Chrome, and FireFox all behave identically with same error.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 62,497Questions: 1Answers: 10,264 Site admin

    Hi,

    It looks like the issue is that Bootstrap 4 hasn't been included. The styling integration is for Bootstrap 4, but I think the option to include Bootstrap 4 was missed.

    When you click the "Customize" button you need to select "Bootstrap 4" in the styling framework section, but then a few options down, just below jQuery, you also need to check to include Bootstrap 4 itself. Otherwise it assumes that you are already loading it on a page.

    Let me know how you get on with that.

    Allan

  • dmartin@mccno.comdmartin@mccno.com Posts: 5Questions: 1Answers: 0

    Allan thank you but the Software listed pasted into my post includes it.

    "Software: DataTables, Editor, Buttons, Column visibility, HTML5 export, Print view, DateTime, Responsive, Select, StateRestore, Bootstrap 4, jQuery 3, Moment, JSZip, pdfmake"

  • allanallan Posts: 62,497Questions: 1Answers: 10,264 Site admin
    edited June 13

    It doesn't appear to be in the file you linked to above. It should have:

    <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js'></script>
    

    and the CSS for Bootstrap 4 and Popper. The file in the link doesn't appear to have that.

    The "Customise" lightbox should look like this:

    Note that "Bootstrap 4" is selected twice - near the top and the second time just after jQuery 3. If I do that and then "Run now" the table renders correctly in Bootstrap 4 styling.

    Edit It looks like the "Software" label on the Generator page is listing the style rather than if the styling library is included or not, which I think is causing the confusion here. I'll get that fixed.

    Allan

  • dmartin@mccno.comdmartin@mccno.com Posts: 5Questions: 1Answers: 0
    edited June 13

    Thank you! My newest download contains your fix.
    When loaded it pops an alert "DataTables warning: table id=key_sheet_rows - Unknown feature: buttons"

    https://api.mccno.com/test3/key_sheet_rows.html new URL

    Is the Buttons extension required?

    Running the bookmarklet (code olefud) the only warning I get is suggesting jQuery 3 but I loaded V1 as in your screenshot.

  • allanallan Posts: 62,497Questions: 1Answers: 10,264 Site admin
    Answer ✓

    Yes, the Javascript that is created includes:

            layout: {
                topStart: {
                    buttons: [
                        { extend: 'create', editor: editor },
                        { extend: 'edit', editor: editor },
                        { extend: 'remove', editor: editor }
                    ]
                }
            },
    

    The Buttons library is therefore required. I think it is selected by default. Select, and DateTime are also required for the basic setup created by Generator.

    Allan

  • dmartin@mccno.comdmartin@mccno.com Posts: 5Questions: 1Answers: 0

    Same error w jQuery 3 loaded.
    Upload code usakes
    URL https://api.mccno.com/test4/key_sheet_rows.html

  • dmartin@mccno.comdmartin@mccno.com Posts: 5Questions: 1Answers: 0

    Hallelujah! It's working! This was the bit I did not know! "The Buttons library is therefore required. I think it is selected by default. Select, and DateTime are also required for the basic setup created by Generator."

    Thank you very much for your help! This will make a big difference in front end dev every day!

Sign In or Register to comment.