TypeError: $.fn.dataTable.Editor is not a constructor ocasionally
TypeError: $.fn.dataTable.Editor is not a constructor ocasionally
Ivse05
Posts: 23Questions: 7Answers: 0
Hi everybody!
TypeError: $.fn.dataTable.Editor is not a constructor
I'm getting this error on page loading very often, but sometimes page loads normally. It can happen after every page reload.
I checked jquery installations, and I have only standard jquery and datatables jquery. I think it has something to do with the scripts loading order, but I tried to change the order of my scripts - no result.
All installed scripts
<#macro main>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="x-ua-compatible" content="ie=edge"/>
<title>PIM</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
<!-- STYLES -->
<!-- Bootstrap-->
<link href="bootstrap_4_4_1/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Admin LTE-->
<!-- Font Awesome Icons -->
<link href="admin_lte_3_0_2/plugins/fontawesome-free/css/all.min.css" rel="stylesheet"/>
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet"/>
<link href="admin_lte_3_0_2/css/adminlte.min.css" rel="stylesheet"/>
<!-- Select2-->
<link href="select2_4_0_1_3/css/select2.min.css" rel="stylesheet"/>
<!--jsTree-->
<link rel="stylesheet" href="jsTree_3_3_9_0/themes/default/style.min.css">
<!-- Main-->
<link href="projectPim/css/main.css" rel="stylesheet"/>
<!-- SCRIPTS -->
<!-- jQuery-->
<script src="jquery_3_4_1/jquery.js" defer></script>
<script type="text/javascript" src="dataTables/DataTables-1.10.20/js/jquery.dataTables.js" defer></script>
<!-- Bootstrap-->
<script src="bootstrap_4_4_1/js/bootstrap.min.js" defer></script>
<script src="bootstrap_4_4_1/js/bootstrap.bundle.min.js" defer></script>
<!-- Admin LTE-->
<script src="admin_lte_3_0_2/js/adminlte.min.js" defer></script>
<!-- Select2-->
<script src="select2_4_0_1_3/js/select2.min.js" defer></script>
<script src="select2_4_0_1_3/js/i18n/uk.js" defer></script>
<!-- jsTree-->
<script type="text/javascript" charset="utf8" src="jsTree_3_3_9_0/jstree.min.js" defer></script>
<script type="text/javascript" charset="utf8" src="jsTree_3_3_9_0/jsTreeGrid.js" defer></script>
<!-- Main-->
<script src="projectPim/js/main.js" defer></script>
<!-- Data tables-->
<link rel="stylesheet" type="text/css" href="dataTables/DataTables-1.10.20/css/dataTables.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="dataTables/Editor-1.9.0/css/editor.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="dataTables/AutoFill-2.3.4/css/autoFill.bootstrap4.min.css"/>
<link rel="stylesheet" type="text/css" href="dataTables/Buttons-1.6.1/css/buttons.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="dataTables/ColReorder-1.5.2/css/colReorder.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="dataTables/FixedColumns-3.3.0/css/fixedColumns.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="dataTables/FixedHeader-3.1.6/css/fixedHeader.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="dataTables/KeyTable-2.5.1/css/keyTable.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="dataTables/Responsive-2.2.3/css/responsive.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="dataTables/RowGroup-1.1.1/css/rowGroup.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="dataTables/RowReorder-1.2.6/css/rowReorder.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="dataTables/Scroller-2.0.1/css/scroller.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="dataTables/SearchPanes-1.0.1/css/searchPanes.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="dataTables/Select-1.3.1/css/select.bootstrap4.css"/>
<!-- Data tables-->
<script type="text/javascript" src="dataTables/JSZip-2.5.0/jszip.js" defer></script>
<script type="text/javascript" src="dataTables/pdfmake-0.1.36/pdfmake.js" defer></script>
<script type="text/javascript" src="dataTables/pdfmake-0.1.36/vfs_fonts.js" defer></script>
<script type="text/javascript" src="dataTables/DataTables-1.10.20/js/dataTables.bootstrap4.js" defer></script>
<script type="text/javascript" src="dataTables/AutoFill-2.3.4/js/dataTables.autoFill.js" defer></script>
<script type="text/javascript" src="dataTables/AutoFill-2.3.4/js/autoFill.bootstrap4.js" defer></script>
<script type="text/javascript" src="dataTables/Buttons-1.6.1/js/dataTables.buttons.js" defer></script>
<script type="text/javascript" src="dataTables/Buttons-1.6.1/js/buttons.bootstrap4.js" defer></script>
<script type="text/javascript" src="dataTables/Buttons-1.6.1/js/buttons.colVis.js" defer></script>
<script type="text/javascript" src="dataTables/Buttons-1.6.1/js/buttons.flash.js" defer></script>
<script type="text/javascript" src="dataTables/Buttons-1.6.1/js/buttons.html5.js" defer></script>
<script type="text/javascript" src="dataTables/Buttons-1.6.1/js/buttons.print.js" defer></script>
<script type="text/javascript" src="dataTables/ColReorder-1.5.2/js/dataTables.colReorder.js" defer></script>
<script type="text/javascript" src="dataTables/FixedColumns-3.3.0/js/dataTables.fixedColumns.js" defer></script>
<script type="text/javascript" src="dataTables/FixedHeader-3.1.6/js/dataTables.fixedHeader.js" defer></script>
<script type="text/javascript" src="dataTables/KeyTable-2.5.1/js/dataTables.keyTable.js" defer></script>
<script type="text/javascript" src="dataTables/Responsive-2.2.3/js/dataTables.responsive.js" defer></script>
<script type="text/javascript" src="dataTables/RowGroup-1.1.1/js/dataTables.rowGroup.js" defer></script>
<script type="text/javascript" src="dataTables/RowReorder-1.2.6/js/dataTables.rowReorder.js" defer></script>
<script type="text/javascript" src="dataTables/Scroller-2.0.1/js/dataTables.scroller.js" defer></script>
<script type="text/javascript" src="dataTables/SearchPanes-1.0.1/js/dataTables.searchPanes.js" defer></script>
<script type="text/javascript" src="dataTables/Select-1.3.1/js/dataTables.select.js" defer></script>
<script type="text/javascript" src="dataTables/Editor-1.9.0/js/dataTables.editor.js" defer></script>
<script type="text/javascript" src="dataTables/Editor-1.9.0/js/editor.bootstrap4.js" defer></script>
</head>
<body class="hold-transition sidebar-mini">
<#nested>
</body>
</html>
</#macro>
Actual table scripts
let editor = new $.fn.dataTable.Editor({
idSrc: 'brandId',
ajax: {
create: {
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
type: 'POST',
url: saveUrl,
data: function (data) {
return JSON.stringify(data.data[0]);
},
},
edit: {
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
type: 'POST',
url: saveUrl,
data: function (data) {
return JSON.stringify(data.data[0]);
},
},
remove: {
type: 'DELETE',
url: deleteUrl + '?id=_id_',
}
},
table: '#brand-table',
fields: [
{label: 'brandId', name: 'brandId', type: "hidden"},
{label: 'text', name: 'text'},
],
});
editor.on('postSubmit', function (e, json, data, action) {
switch (action) {
case "create":
case "edit":
let rowData = $.extend({}, json);
json.data = [rowData];
break;
case "remove":
break;
}
});
$("#brand-table").on('click', 'tbody td:not(:first-child)', function (e) {
editor.inline(this, {
onBlur: 'submit'
});
});
$('#brand-table').dataTable({
ajax: {
dataSrc: "",
url: getAllUrl,
type: "GET",
dataType: 'json',
},
dom: 'Bfrtip',
columns: [
{data: "brandId"},
{data: 'text'},
],
select: {
style: 'os',
selector: 'td:first-child'
},
buttons: [
{extend: 'create', editor: editor},
{extend: 'remove', editor: editor}
],
language: {
url: '//cdn.datatables.net/plug-ins/1.10.20/i18n/Ukrainian.json'
},
});
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
You would normally see this when the Editor files either aren't included, or the trial has expired. I've not seen it happen intermittently. Is there a pattern to when it fails? Are you able to link to your page so we can look?
Colin
Unfornunately I am not permitted to give links to this project anybody who doesn't work in our company. The pattern is: if I refresh the page, I'm forced to refresh it 3-4 times, till it loads normally, otherwise it displays this error. But when it loads, it works fine and no eroors appear.
That's something we've not seen, that does sounds very odd. Without seeing the problem, it's going to be very tricky to diagnose. Has it started recently? Or has it always done this?
Colin
I am sorry, my bad, I found the bug: the main script(marked "Main" in comments) was placed before datatables scripts. I put it in the end of the file with scripts, and now it is ok. Thank you for you help, Colin.