Javascript error from Generator code out of the box

dmartin@mccno.com

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.

allan

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.com

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"

allan

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.com

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.

allan

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.com

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

dmartin@mccno.com

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!