jQuery.Deferred exception: $.fn.dataTable.Editor is not a constructor
jQuery.Deferred exception: $.fn.dataTable.Editor is not a constructor
ssssmmmmmmmm
Posts: 4Questions: 1Answers: 0
Link to test case:
{% extends "base.html" %}
{% block content %}
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<script src="https://cdn.datatables.net/v/bs5/dt-2.0.1/b-3.0.0/b-colvis-3.0.0/cr-2.0.0/r-3.0.0/sc-2.4.0/datatables.min.js"></script>
<script src="https://cdn.datatables.net/select/2.0.0/js/select.dataTables.js"></script>
<script src="https://cdn.datatables.net/select/2.0.0/js/dataTables.select.js"></script>
<script src="{{ url_for('static', filename='datatables/editor.dataTables.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/2.3.1/luxon.min.js"></script>
<link href="{{ url_for('static', filename='datatables/editor.dataTables.css') }}" rel="stylesheet" type="text/css" />
<link href="https://cdn.datatables.net/v/bs5/dt-2.0.1/b-3.0.0/b-colvis-3.0.0/cr-2.0.0/r-3.0.0/sc-2.4.0/datatables.min.css" rel="stylesheet">
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="page-title-box">
<h4 class="page-title">Player List</h4>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<table id="players-table" class="table table-bordered table-striped" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Last Name</th>
<th>Skill Level</th>
<th>Admin</th>
<th>Use Email</th>
<th>Use Phone</th>
<th>Regular</th>
<th>Matches</th>
<th>Matches Won</th>
<th>Matches Lost</th>
<th>Email</th>
<th>Registration Date</th>
<th>Preferred Side</th>
<th>Best Hand</th>
<th>Logins</th>
<th>Last Login</th>
<th>Phone</th>
<th>Late Optout</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
table: "#players-table",
ajax: "{{ url_for('edit_player') }}",
fields: [
{ label: "ID", name: "id" },
{ label: "Name", name: "name" },
{ label: "Last Name", name: "last_name" },
{ label: "Skill Level", name: "skill_level" },
{ label: "Is Admin", name: "is_admin" },
{ label: "Use Email", name: "use_email" },
{ label: "Use Phone", name: "use_phone" },
{ label: "Regular", name: "regular" },
{ label: "Match Count", name: "match_count" },
{ label: "Matches Won", name: "matches_won" },
{ label: "Matches Lost", name: "matches_lost" },
{ label: "Email", name: "email" },
{ label: "Registration Date", name: "regdate" },
{ label: "Preferred Side", name: "preferred_side" },
{ label: "Best Hand", name: "best_hand" },
{ label: "Logins", name: "logins" },
{ label: "Last Login", name: "last_login" },
{ label: "Phone", name: "phone" },
{ label: "Late Optout", name: "late_optout" },
],
});
$('#players-table').DataTable({
responsive: true,
dom: 'Bfrtip',
ajax: "{{ url_for('players_data') }}",
colReorder: true,
paging: true,
scrollX: true,
columns: [
{ data: 'id', visible: false},
{ data: 'name' },
{ data: 'last_name', visible: false },
{ data: 'skill_level' },
{ data: 'is_admin', visible: false },
{ data: 'use_email', visible: false },
{ data: 'use_phone', visible: false },
{ data: 'regular' },
{ data: 'match_count' },
{ data: 'matches_won' },
{ data: 'matches_lost' },
{ data: 'email', visible: false },
{ data: 'regdate' },
{ data: 'preferred_side', visible: false },
{ data: 'best_hand', visible: false },
{ data: 'logins', visible: false },
{ data: 'last_login', visible: false },
{ data: 'phone', visible: false },
{ data: 'late_optout', visible: false },
],
buttons: [
{
extend: 'colvis',
text: 'Column Filter',
className: 'btn-primary'
}
],
columnDefs: [
{
targets: [12, 16],
render: function (data, type, row) {
if (type === 'display' && data) {
var date = new Date(data);
var day = ("0" + date.getDate()).slice(-2);
var month = ("0" + (date.getMonth() + 1)).slice(-2);
var year = date.getFullYear();
return day + "-" + month + "-" + year;
}
return data;
}
}
],
select: true,
buttons: [
{ extend: 'create', editor: editor },
{ extend: 'edit', editor: editor },
{ extend: 'remove', editor: editor },
{ extend: 'colvis', text: 'Column Filter' }
],
order: [[8, 'desc']],
});
});
</script>
{% endblock content %}
Debugger code (debug.datatables.net): https://debug.datatables.net/ohikuc
Error messages shown:
jQuery.Deferred exception: $.fn.dataTable.Editor is not a constructor @http://192.168.1.26:5000/players:373:18
e@https://code.jquery.com/jquery-3.7.1.min.js:2:27028
Deferred/then/l/</t<@https://code.jquery.com/jquery-3.7.1.min.js:2:27330
setTimeout handler*Deferred/then/l/<@https://code.jquery.com/jquery-3.7.1.min.js:2:27594
c@https://code.jquery.com/jquery-3.7.1.min.js:2:25304
fireWith@https://code.jquery.com/jquery-3.7.1.min.js:2:26053
fire@https://code.jquery.com/jquery-3.7.1.min.js:2:26089
c@https://code.jquery.com/jquery-3.7.1.min.js:2:25304
fireWith@https://code.jquery.com/jquery-3.7.1.min.js:2:26053
ready@https://code.jquery.com/jquery-3.7.1.min.js:2:29112
P@https://code.jquery.com/jquery-3.7.1.min.js:2:28884
EventListener.handleEvent*@https://code.jquery.com/jquery-3.7.1.min.js:2:29264
@https://code.jquery.com/jquery-3.7.1.min.js:2:220
@https://code.jquery.com/jquery-3.7.1.min.js:2:225
undefined
Uncaught TypeError: $.fn.dataTable.Editor is not a constructor
<anonymous> http://192.168.1.26:5000/players:373
jQuery 13
e
t
setTimeout handler*Deferred/then/l/<
c
fireWith
fire
c
fireWith
ready
P
EventListener.handleEvent*
<anonymous>
<anonymous>
Description of problem:
Dear all,
I have a valid license for DataTables Editor and struggle implementing the Editor. The table works great without the Editor loaded. This is all in a Python Flask App, running this theme https://prium.github.io/phoenix/v1.15.0/index.html?theme-control=true&color-scheme=dark
I cannot fix the Uncaught TypeError: $.fn.dataTable.Editor is not a constructor and jQuery.Deferred exception: $.fn.dataTable.Editor is not a constructor error. jQuery is not loaded on different locations in the code. In the network tab of the inspector the .js and .css files all are loaded with status 200. The response is valid code.
Is there anybody who can point me in the right direction how to get this to work?
Your help is much appreciated,
thanks!
Answers
I believe you might get that error if the trial has expired. Have you downloaded the Editor package again since getting your license? Once licensed it needs to be downloaded and installed in your app to get the licensed version.
Kevin
Thanks for your reply, @kthorngren
I have just redownloaded the editor files and added the .css and .js, overwrote the existing files. The error persists.
I bought the license in November 2023. That said, I have not tried to implement the Editor until now
If you can link to your page showing the issue I can look into it.
Nice theme btw - I like that one.
Allan
Thanks @allan. It's a beautiful theme, lot's of fun. The app runs on my VM on Proxmox, I will see how I can easiest expose it to the Internet.
edit: I sent you a message with the link!
I'll leave that here for others to find.
The right .js to load is
<script src="/static/datatables/dataTables.editor.js
User, as in me, was stupid. Thanks Allan for figuring this out.