Generator Packages not working - Uncaught Cannot extend unknown button type: selected datatables.min

Generator Packages not working - Uncaught Cannot extend unknown button type: selected datatables.min

domenicdomenic Posts: 3Questions: 1Answers: 0

https://live.datatables.net/subeqajo/1/edit?html,css,js,console,output:
Debugger code onovex:
Uncaught Cannot extend unknown button type: selected datatables.min.js:32:
Description of problem: - Same issue as second example

https://live.datatables.net/talidili/1/edit?html,css,js,console,output
Debugger code apolaz:
Uncaught Cannot extend unknown button type: selected datatables.min.js:32:

Description of problem:

Hi! My apologies in advance as I am a coding noob that is trying to develop a web app. I accidently found the world of datatables last week and I instantly recognized this is a MUST HAVE for me due to my app relying heavily on a back-end database and the need to display & edit data to users. I purchased the Developer License on Monday for the editor but have been racking my brains for DAYS now just to achieve my datatables Hello World moment...

My humble goal is to simply get a simple table displayed on the screen (just four columns) that is editable connected to a simple table within my MySQL database. My plan is to then use this as a template of sorts for the CDNs on the front end I commonly use and the backend for database connectivity.

When I found your code generator I figured this would be stupid simple - https://editor.datatables.net/generator/index. Not so much several days later now...

Using the software selector I first chose the DataTables styling framework, jQuery 3, Moment, DataTables, Editor,Buttons, & DateTime. I then selected PHP, MySQL and entered the information for my Form / Table, etc & hit the Download Package button. I also did a secondary config using Bootstrap 5 I would test for a second round.

Next I deleted everything in the www directory of my dev webserver, unzipped the package, edited the config file with my database info, and entered the frontend HTML filename into the browser. The page loaded with the table column names but no date. When I opened the dev console the network tab loaded all of the files fine and I had a single error in the Console tab - Uncaught Cannot extend unknown button type: selected datatables.min.js:32: No data was returned to the screen I then cleared everything out and then dropped in my second zip containing the Bootstrap 5 version. same result. I did some modifications to turn off the edit functionality and could easily get the data to display on the screen so the back-end connection is confirmed to work.

This is when I went down the rabbit hole(s) with ChatGPT dring to do a deep dive into the issue doing everything I could do debug the code.

The Generator created this standard section in my js file;


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


Doing a pause at uncaught sections in the Sources tab led me to this piece of code in datatables.min.js


var n, o, i = this, s = this.s.dt;
for (e = t(e); e && e.extend; ) {
if (!w[e.extend])
throw "Cannot extend unknown button type: " + e.extend;


So what seems to be going on is the layout section in the .js file is trying to define what buttons the editor will use but for some reason the datatables.min.js isn't happy thinking a button is "unknown" which causes the table not to initalize explaining why its halting before any data is shown on the screen.

Same behavior for the DataTables version of style framework as well as the Bootstrap 5 version.

Next chapter......

I then started trying all kinds of combinations with the generator picking different things to see if I could make some combo work. Some way somehow in a middle of the night moment of muted victory I got this autogenerated version to work

https://live.datatables.net/qojosuna/1/edit?html,css,js,console,output
Your debug code is: inirot

Don't ask me how or why but for the life of me (and ChatGPT) I can't figure out the difference and I am unable to replicate my success which brings me back to my first point - I just want to be able to use the code generator to bang out a table with the addons I want and it just work when I drop it down onto my clean dev server so I can modify the frontend for the specific cosmetics of the page I am working on. I need to be able to make this repeatable and reliable.

I am new to all of this and just noticed 2.x was just released a couple of weeks ago. Bugs maybe with the generator or the code? This generator thing is an awesome / killer feature and the way it works is the zip file should just work with nothing to do but update the config file with creds. Right?

Thanks in advance for any help.

Domenic

Answers

  • allanallan Posts: 61,805Questions: 1Answers: 10,118 Site admin

    Hi Domenic,

    It looks like the Select extension has been deselected for your download / Generator build. Adding it in, allows it to work.

    Use:

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.7.0/moment-2.29.4/dt-2.0.3/b-3.0.1/date-1.5.2/sl-2.0.0/datatables.min.css">
    
    <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/dt/jq-3.7.0/moment-2.29.4/dt-2.0.3/b-3.0.1/date-1.5.2/sl-2.0.0/datatables.min.js"></script>
    

    For the CDN urls. That's the same as before but with sl-2.0.0/ added into to make it include the Select extension.

    If I go to the Generator page and without changing the software selection in the "Customize" button, but rather just enter some database details, it works without error.

    Regards,
    Allan

  • domenicdomenic Posts: 3Questions: 1Answers: 0

    Sorry for being dense but I don't understand;

    "If I go to the Generator page and without changing the software selection in the "Customize" button, but rather just enter some database details, it works without error."

    So from a UI / workflow perspective of the page you aren't supposed to make any selections or changes in the "Customize" page? How then are you supposed to differentiate your styling framework say between Bootstrap and your Datatables Default or include / exclude all of the other options shown on the customize page? Isn't the point of the generator to make all of these selections?

    Many thanks for the quick response.

  • allanallan Posts: 61,805Questions: 1Answers: 10,118 Site admin

    So from a UI / workflow perspective of the page you aren't supposed to make any selections or changes in the "Customize" page?

    Yes, of course you can. But you need to keep the Select option checked if you want to be able to use the create, edit and delete buttons, which the code created by Generator does, since they extend from buttons defined by Select. From the error you were getting before, Select had been disabled.

    The key to remember with Generator is that it is a quick start tool only. It is not designed to do anything but the most basic of tables and setups.

    Allan

  • domenicdomenic Posts: 3Questions: 1Answers: 0

    Got it - Feature request however for the Generator.

    I have some tables with many columns so it would be great if I could import (csv maybe) the column headers and names plus the other info.

  • allanallan Posts: 61,805Questions: 1Answers: 10,118 Site admin

    That's a cool idea, and one I might explore in future. Thank you.

    Allan

Sign In or Register to comment.