jquery-3.5.1.js:4055 Uncaught TypeError: $.fn.dataTable.Editor is not a constructor

webman · March 2021

This bug is so frustrating how do you fix this this issue? I purchased a license but this keeps giving me this error.

jquery-3.5.1.js:4046 jQuery.Deferred exception: $.fn.dataTable.Editor is not a constructor TypeError: $.fn.dataTable.Editor is not a constructor
at HTMLDocument.<anonymous> (http://localhost:54081/InstallFees/options:121:22)
at mightThrow (https://code.jquery.com/jquery-3.5.1.js:3762:29)
at process (https://code.jquery.com/jquery-3.5.1.js:3830:12) undefined
jQuery.Deferred.exceptionHook @ jquery-3.5.1.js:4046
jquery-3.5.1.js:4055 Uncaught TypeError: $.fn.dataTable.Editor is not a constructor
at HTMLDocument.<anonymous> (options:121)
at mightThrow (jquery-3.5.1.js:3762)
at process (jquery-3.5.1.js:3830)

webman · March 2021

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
    <title>Editor example - Editing options - submit on blur</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.7.0/css/buttons.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.2/css/select.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/datetime/1.0.2/css/dataTables.dateTime.min.css">
    <link rel="stylesheet" type="text/css" href="~/css/editor.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="~/resources/syntax/shCore.css">
    <link rel="stylesheet" type="text/css" href="~/resources/demo.css">
    <style type="text/css" class="init">
    </style>  

    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.7.0/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.3.2/js/dataTables.select.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/datetime/1.0.2/js/dataTables.dateTime.min.js"></script>

    <script type="text/javascript" language="javascript" src="~/js/dataTables.editor.min.js"></script>
    <script type="text/javascript" language="javascript" src="~/resources/syntax/shCore.js"></script>
    <script type="text/javascript" language="javascript" src="~/resources/demo.js"></script>
    <script type="text/javascript" language="javascript" src="~/resources/editor-demo.js"></script>
    <script type="text/javascript" language="javascript" class="init">

        var editor; // use a global for the submit and return data rendering in the examples

        $(document).ready(function () {
            editor = new $.fn.dataTable.Editor({
                ajax: "/api/staff",
                table: "#example",
                fields: [{
                    label: "First name:",
                    name: "first_name"
                }, {
                    label: "Last name:",
                    name: "last_name"
                }, {
                    label: "Position:",
                    name: "position"
                }, {
                    label: "Office:",
                    name: "office"
                }, {
                    label: "Extension:",
                    name: "extn"
                }, {
                    label: "Start date:",
                    name: "start_date",
                    type: "datetime"
                }, {
                    label: "Salary:",
                    name: "salary"
                }
                ]
            });

            $('#example').on('click', 'tbody td:not(:first-child)', function (e) {
                editor.inline(this, {
                    onBlur: 'submit'
                });
            });

            $('#example').DataTable({
                dom: "Bfrtip",
                ajax: "/api/staff",
                columns: [
                    {
                        data: null,
                        defaultContent: '',
                        className: 'select-checkbox',
                        orderable: false
                    },
                    { data: "first_name" },
                    { data: "last_name" },
                    { data: "position" },
                    { data: "office" },
                    { data: "start_date" },
                    { data: "salary", render: $.fn.dataTable.render.number(',', '.', 0, '$') }
                ],
                order: [1, 'asc'],
                select: {
                    style: 'os',
                    selector: 'td:first-child'
                },
                buttons: [
                    { extend: "create", editor: editor },
                    { extend: "edit", editor: editor },
                    { extend: "remove", editor: editor }
                ]
            });
        });
    </script>
</head>
<body class="dt-example net">
    <div class="container">
        <section>            
            <div class="demo-html">
                <table id="example" class="display" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th></th>
                            <th>First name</th>
                            <th>Last name</th>
                            <th>Position</th>
                            <th>Office</th>
                            <th width="18%">Start date</th>
                            <th>Salary</th>
                        </tr>
                    </thead>
                </table>  
            </div>
    </section>
    </div>
</body>
</html>

EDIT: Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren · March 2021

Usually the main cause for the error is that, since its licensed, you need to download it and load it from a local resource. If this doesn't help please post the code you are using to load the editor.js and initializing.

Kevin

webman · March 2021

I purchased the license and loading the editor.js locally, Still broken

kthorngren · March 2021

I might be missing it but it doesn't look like you are loading jquery.js nor datatables.js. Please see this basic Editor example.

Kevin

webman · March 2021

I am loading those files in the shared layout file.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> - Intermountian Gas Project Cost Estimator</title>

<link rel="stylesheet" href="/css/site.css" />
<!--DataTables Information -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">

<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

kthorngren · March 2021

Is that shared layout loaded first?

Kevin

kthorngren · March 2021

Try clearing the browsers cache.

Kevin

webman · March 2021

Yes it was

webman · March 2021

Ok after some adjustments I am getting a new error

jquery-3.5.1.js:4046 jQuery.Deferred exception: Cannot read property 'style' of undefined TypeError: Cannot read property 'style' of undefined
at Xa (https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js:79:399)
at za (https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js:65:188)
at f (https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js:110:53)
at HTMLTableElement.<anonymous> (https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js:110:139)
at Function.each (https://code.jquery.com/jquery-3.5.1.js:381:19)
at jQuery.fn.init.each (https://code.jquery.com/jquery-3.5.1.js:203:17)
at jQuery.fn.init.u [as dataTable] (https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js:100:148)
at jQuery.fn.init.k.fn.DataTable (https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js:184:240)
at HTMLDocument.<anonymous> (http://localhost:54081/InstallFees/InstallFeeUpdate:172:30)
at mightThrow (https://code.jquery.com/jquery-3.5.1.js:3762:29) undefined
jQuery.Deferred.exceptionHook @ jquery-3.5.1.js:4046
jquery-3.5.1.js:4055 Uncaught TypeError: Cannot read property 'style' of undefined
at Xa (jquery.dataTables.min.js:79)
at za (jquery.dataTables.min.js:65)
at f (jquery.dataTables.min.js:110)
at HTMLTableElement.<anonymous> (jquery.dataTables.min.js:110)
at Function.each (jquery-3.5.1.js:381)
at jQuery.fn.init.each (jquery-3.5.1.js:203)
at jQuery.fn.init.u [as dataTable] (jquery.dataTables.min.js:100)
at jQuery.fn.init.k.fn.DataTable (jquery.dataTables.min.js:184)
at HTMLDocument.<anonymous> (InstallFeeUpdate:172)
at mightThrow (jquery-3.5.1.js:3762)

kthorngren · March 2021

See if this thread asking about the same error helps.

Kevin

colin · March 2021

If Kevin's link doesn't fix it, can you post a link to your page please so we can take a look?

Colin

jquery-3.5.1.js:4055 Uncaught TypeError: $.fn.dataTable.Editor is not a constructor

jquery-3.5.1.js:4055 Uncaught TypeError: $.fn.dataTable.Editor is not a constructor

Replies

Howdy, Stranger!

Categories

DataTables

jquery-3.5.1.js:4055 Uncaught TypeError: $.fn.dataTable.Editor is not a constructor

jquery-3.5.1.js:4055 Uncaught TypeError: $.fn.dataTable.Editor is not a constructor

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables