Error in editor purchased.... Uncaught TypeError: $.fn.dataTable.Editor is not a constructor

aseverinom

Hi Guys, I purchased the editor and downloaded JS+CSS... have this header and javascript but receive error "Uncaught TypeError: $.fn.dataTable.Editor is not a constructor" , so please can you help me ... thanks.

  <link href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.dataTables.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/select/1.3.3/css/select.dataTables.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/datetime/1.1.0/css/dataTables.dateTime.min.css" rel="stylesheet">
    <link href="libs/Editor-2.0.4/css/editor.dataTables.min.css" rel="stylesheet">

    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
    <script src="https://cdn.datatables.net/datetime/1.1.0/js/dataTables.dateTime.min.js"></script>
    <script type="text/javascript" src="libs/Editor-2.0.4/js/dataTables.editor.min.js" ></script>

 var editor;

               editor = new $.fn.dataTable.Editor( {
                    ajax: "../backend/container_booking.php",
                    table: "#skuCDatatable",
                    fields: [ {
                        label: "BOOKING",
                        name:  "booking_number"
                    }, {
                        label: "IM",
                        name:  "im"
                    }, {
                        label: "SOCIO",
                        name:  "partner"
                    }, {
                        label: "ORDEN",
                        name: "order_number"
                    }, {
                        label: "SKU",
                        name: "sku_code_esp"
                    }, {
                        label: "CANTIDAD",
                        name: "ord_sku_qty_total"
                    }, {
                        label: "BOOKEADO",
                        name: "ord_sku_qty_booked"
                    }, {
                        label: "EMBARCADO",
                        name: "sku_qty_shipped"
                    }, {
                        label: "DATE",
                        name: "con_boo_date"
                    }
                    ]
                } );

                $('#skuCDatatable').DataTable( {
                    dom: "Bfrtip",
                    ajax: {
                        url: "../backend/container_booking.php",
                        type: 'POST'
                    },
                    columns: [
                        { data: "booking_number" },
                        { data: "im" },
                        { data: "partner" },
                        { data: "order_number" },
                        { data: "sku_code_esp" },
                        { data: "ord_sku_qty_total" },
                        { data: "ord_sku_qty_booked" },
                        { data: "sku_qty_shipped" },
                        { data: "con_boo_date" }
                    ],
                    select: true,
                    buttons: [
                        { extend: "create", editor: editor },
                        { extend: "edit",   editor: editor },
                        { extend: "remove", editor: editor }
                    ]
                } );

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

Everything looks like it should, so that's odd. Are you getting any 404 errors in the browser's console?

Colin

aseverinom

hi @colin, in console have this :

createContainer.php:1928 Uncaught TypeError: $.fn.dataTable.Editor is not a constructor
at HTMLInputElement.<anonymous> (createContainer.php:1928)
at HTMLInputElement.dispatch (jquery.js:5429)
at HTMLInputElement.m.handle (jquery.js:5233)
(anonymous) @ createContainer.php:1928
dispatch @ jquery.js:5429
m.handle @ jquery.js:5233

allan

Hi,

Is there anything else shown in your browser's console - any 404 messages or anything else? What you have above looks fine, which suggests to me that either the Editor file isn't where the address is pointing to, or the contents of it aren't quite right.

Another possibility is that there are some other scripts on the page interfering with it - for example loading jQuery again?

Can you give me a link to the page so I can take a look into it?

Thanks,
Allan

aseverinom

Hi Allan, i don't have more messages in console... and regrettably can give you access because this is a private system... but can i tell you that i'm using a Bootstrap 5 template ,, specifically this https://themes.getbootstrap.com/product/spark-responsive-admin-template/ ... please your help guys,... I bought this library thinking that will be a solution... thanks a lot in advance

allan

We'll get to the bottom of it! I'm not not immediately sure what the problem is, as we aren't seeing it in our tests or examples.

If you try to load:

http://{your-site}/libs/Editor-2.0.4/js/dataTables.editor.min.js

replacing {your-site} as needed for your ip address / domain or whatever else, does it load the Editor minified Javascript? If you load the dataTables.editor.js file - is it intelligible code, or just total nonsense?

When you purchased Editor, did you download the licensed version and install that over your existing dataTables.editor{.min}.js files?

Thanks,
Allan

aseverinom

Hi @allan ,I replaced the url for editor as you can see below :

<link href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.css" rel="stylesheet">
<link href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.dataTables.css" rel="stylesheet">
<link href="https://cdn.datatables.net/select/1.3.3/css/select.dataTables.css" rel="stylesheet">
<link href="https://cdn.datatables.net/datetime/1.1.0/css/dataTables.dateTime.css" rel="stylesheet">
<link href="http://desa.antsgsm.com/ants/libs/Editor-2.0.4/css/editor.dataTables.css" rel="stylesheet">

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.js"></script>
<script src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.js"></script>
<script src="https://cdn.datatables.net/datetime/1.1.0/js/dataTables.dateTime.js"></script>
<script src="http://desa.antsgsm.com/ants/libs/Editor-2.0.4/js/dataTables.editor.js" ></script>

but have the same message in console :

in addition to the above, I downloaded the file from your page after purchase the license, anyway now I deleted the directory and dowloaded again, but don't work it...

allan

That is certainly Editor, which suggests to me that either the code is being run before Editor is loaded, or that another jQuery and DataTables are being loaded on the page, overwriting the ones you have above. Given that you are using a theme, that seems like the most likely explanation to me.

Can you load the debugger on your page and then click the upload option, click the upload button and then let me know the code that it gives you when the upload is complete please?

Thanks,
Allan

aseverinom

nice tools @allan.. the code generated is averuz ... https://debug.datatables.net/averuz thanks a lot in advance

allan

Thanks .

From that I can see that it is reporting that DataTables 1.10.21 and Buttons 1.6.3 is what is being used on your page. But the script tags above are actually importing 1.10.25 and 1.7.1 respectively.

That makes me absolutely convinced that the theme you are using (or something else) is importing jQuery, DataTables and Buttons again later. The way jQuery works when it is imported onto a page multiples is that it will overwrite its former self, taking with it all plug-ins! Thus way you are now getting the error you are.

So, the key is going to be loading in Editor after your theme (or whatever else) is loading in jQuery and DataTables. Does it have a way to do that?

Thanks,
Allan

aseverinom

Hi @allan , I created a new file outside of template but have an error in console :

jquery-3.5.1.js:10099 POST http://mysite.com/backend/container_booking.php?containerID=77&detalle=detalleBookingContainer 400 (Bad Request)

the php file is :

<?PHP include_once "../backend/utils.php"; ;?>

<!DOCTYPE html>
<html lang="en">

<head>

<link href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/select/1.3.3/css/select.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/datetime/1.1.0/css/dataTables.dateTime.min.css" rel="stylesheet">
<link href="libs/Editor-2.0.4/css/editor.dataTables.min.css" rel="stylesheet">

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/datetime/1.1.0/js/dataTables.dateTime.min.js"></script>
<script type="text/javascript" src="libs/Editor-2.0.4/js/dataTables.editor.min.js" ></script>




<!-- END SETTINGS -->

</head>

<body>

    <table id="skuCDatatable" class="table table-striped" style="width:100%">
        <thead>
        <tr>
            <th>BOOKING</th>
            <th>IM</th>
            <th>SOCIO</th>
            <th>ORDEN</th>
            <th>SKU</th>
            <th>CANTIDAD</th>
            <th>BOOKEADO</th>
            <th>EMBARCADO</th>
            <th>DATE</th>
            <th></th>
        </tr>

        </thead>
    </table>

</body>

</html>

$(function () { var variables = "containerID=77"; var editor; editor = new $.fn.dataTable.Editor( { ajax: "../backend/container_booking.php?"+ variables, table: "#skuCDatatable", fields: [ { label: "BOOKING", name: "booking_number" }, { label: "IM", name: "im" }, { label: "SOCIO", name: "partner_name" }, { label: "ORDEN", name: "order_number" }, { label: "SKU", name: "sku_code_esp" }, { label: "CANTIDAD", name: "ord_sku_qty_total" }, { label: "BOOKEADO", name: "ord_sku_qty_booked" }, { label: "EMBARCADO", name: "sku_qty_shipped" }, { label: "DATE", name: "con_boo_date" }] }); $('#skuCDatatable').DataTable( { dom: "Bfrtip", ajax: { url: "../backend/container_booking.php?" + variables, type: 'POST' }, columns: [ { data: "booking_number" }, { data: "im" }, { data: "partner_name" }, { data: "order_number" }, { data: "sku_code_esp" }, { data: "ord_sku_qty_total" }, { data: "ord_sku_qty_booked" }, { data: "sku_qty_shipped" }, { data: "con_boo_date" } ], select: true, buttons: [ { extend: "create", editor: editor }, { extend: "edit", editor: editor }, { extend: "remove", editor: editor } ] }); });

and the json file deliver this :

{"data":[{"order_number":"5885564","partner_name":"RIQUELME HERMANOS LTDA.","booking_number":"177QBBTTXMNN1840","im":"2753","sku_code_esp":"MG2211050HD","ord_sku_qty_total":"100","ord_sku_qty_booked":"100","sku_qty_shipped":"100","con_boo_id":"936","con_boo_date":"27-04-2021 00:00:00"},{"order_number":"5885569","partner_name":"COMERCIAL FRANCISCO TOSO LTDA.","booking_number":"177QBBTTXMNN1840","im":"2753","sku_code_esp":"MG2211050HD","ord_sku_qty_total":"50","ord_sku_qty_booked":"50","sku_qty_shipped":"50","con_boo_id":"937","con_boo_date":"27-04-2021 00:00:00"},{"order_number":"5885628","partner_name":"RICARDO TEJOS Y CIA. UNO LTDA.","booking_number":"177QBBTTXMNN1840","im":"2753","sku_code_esp":"MG2211050HD","ord_sku_qty_total":"140","ord_sku_qty_booked":"140","sku_qty_shipped":"140","con_boo_id":"938","con_boo_date":"27-04-2021 00:00:00"},{"order_number":"5886764","partner_name":"CHILEMAT SPA.","booking_number":"177QBBTTXMNN1840","im":"2753","sku_code_esp":"MG2211050HD","ord_sku_qty_total":"20","ord_sku_qty_booked":"20","sku_qty_shipped":"20","con_boo_id":"939","con_boo_date":"27-04-2021 00:00:00"}]}

aseverinom

hi @allan, forget it ... I resolved the issue... changed the request method in Ajax from POST to GET and work... thanks for you help..
the main issue is the bootstrap theme...

thanks again..

regards,