Strange error: a.one is not a function.
Strange error: a.one is not a function.
I am getting a strange error in my console. Datatables loads the data from the database fine. But when I edit or create, I get a spinning wheel on the edit/create button and the following errr.
TypeError: a.one is not a function. (In 'a.one("preOpen",function(){f.processing(!1)})', 'a.one' is undefined)
in datatables.Editor.min.js:150:203
I am loading datatables from CDN:
<script type="text/javascript" src="https://cdn.datatables.net/v/bs5/jq-3.6.0/jszip-2.5.0/dt-1.12.1/b-2.2.3/b-colvis-2.2.3/b-html5-2.2.3/b-print-2.2.3/date-1.1.2/fc-4.1.0/fh-3.2.4/kt-2.7.0/r-2.3.0/rg-1.2.0/sc-2.0.7/
<script type="text/javascript">
/*
* Editor client script for DB table NUSERS
* Created by http://editor.datatables.net/generator
*/
var editor = new $.fn.dataTable.Editor( {
ajax: {
url: '/JSON/table.NUSERS.json.php',
type: 'POST'
},
table: "#nusers-datatable",
idSrc: "userId",
// "NUSERS.userId",
fields: [
{
"label": "userId:",
"name": "userId",
"type": "readonly"
},
{
"label": "Username:",
"name": "NUSERS.username"
},
{
"label": "First Name:",
"name": "NUSERS.firstName"
},
{
"label": "Last Name:",
"name": "NUSERS.lastName"
},
{
"label": "Password:",
"name": "NUSERS.password",
"type": "password"
},
{
"label": "Phone Number:",
"name": "NUSERS.phoneNumber"
},
{
"label": "Email Address:",
"name": "NUSERS.emailAddress"
},
{
"label": "Department Id:",
"name": "NUSERS.departmentId"
},
{
"label": "Ticket Admin:",
"name": "NUSERS.isTicketAdmin"
},
{
"label": "Logs Admin:",
"name": "NUSERS.isLogaAmin"
},
{
"label": "Transfer Admin:",
"name": "NUSERS.isTransferAdmin"
},
{
"label": "Super Admin:",
"name": "NUSERS.isSuperAdmin"
},
{
"label": "Parts Admin:",
"name": "NUSERS.isPartsAdmin"
}
]
} );
var table = $('#nusers-datatable').DataTable( {
ajax: {
url: '/JSON/table.NUSERS.json.php',
type: 'POST'
},
// dom: "Bfrtp",
dom:
"<'row'<'col-md-9'B><'col-sm-3 text-right'f>>" +
"<'row'<'col-md-12'tr>>" +
"<'row'<'col-md-5'i><'col-sm-7'p>>",
//dom: "QBfrtip",
columns: [
// {
// "data": "NUSERS.userId", "editField": "userId"
// },
{
"data": "NUSERS.username"
},
{
"data": "NUSERS.firstName"
},
{
"data": "NUSERS.lastName"
},
{
"data": "NUSERS.phoneNumber"
},
{
"data": "NUSERS.emailAddress"
},
{
"data": "NUSERS.lastLogin"
}
],
select: true,
lengthChange: true,
lengthMenu: [
[ 10, 50, 100, -1 ],
[ '10 rows', '50 rows', '100 rows', 'Show all' ]
],
// buttons: [ 'pageLength', 'colvis', 'copy', 'excel', 'pdf', { extend: 'edit', editor: 'editor', text: 'EDIT' } ],
buttons:[ 'pageLength',
{ extend: 'colvis', text: 'COLUMNS ON/OFF' },
{ extend: 'create', editor: 'editor', text: 'ADD USER' },
{ extend: 'edit', editor: 'editor', text: 'EDIT USER' }
],
// buttons: ['copy', 'excel', 'pdf', 'colvis'],
language: {
searchPlaceholder: 'Search...',
scrollX: "100%",
sSearch: '',
}
});
table.buttons().container().appendTo('#nusers-datatable_wrapper .col-md-6:eq(0)');
// } );
// }(jQuery));
</script>
Debugger code (debug.datatables.net):
Here is my JSON output:
{"data":[{"DT_RowId":"row_2","NUSERS":{"userId":"2","firstName":"Robert","lastName":"Glasgow","username":"mheitland","password":"*****","phoneNumber":"555-555-5555","emailAddress":"user2@nodomain.com","lastLogin":"2022-07-28 16:04:21.827","departmentId":"1","isTicketAdmin":"0","isLogAdmin":"0","isTransferAdmin":"0","isSuperAdmin":"1","isPartsAdmin":"0"}},{"DT_RowId":"row_9","NUSERS":{"userId":"9","firstName":"Jon","lastName":"Crack","username":"jstenzel","password":"*****","phoneNumber":"555-555-5555","emailAddress":"user1@nodomain.com","lastLogin":"2022-07-19 00:00:00.000","departmentId":"1","isTicketAdmin":"1","isLogAdmin":"1","isTransferAdmin":"1","isSuperAdmin":"1","isPartsAdmin":"1"}}],"options":[],"files":[]}
Answers
I think it is this:
Replace with:
You want to pass the Editor instance, not a string.
Regards,
Allan
So yeah, that resolved the error. Thanks man. However, I still get the spinning buttons with no modification or timeout.
If you can give me a link to the page showing the issue I can debug it.
Allan
I wish I could. Its behind the corporate firewall. I double checked everything and now the page just bounces and opens up a larger area under the footer. I see that once I press the button I get the two div's "DTED_Lightbox_Background" and "DTED_Lightbox_wrapper" but these never pop up for edits.
Are you loading jQuery twice on the page maybe? Perhaps you can show me the full HTML and DataTables / Editor for the page?
Allan
Thanks for your PM with the full page. I've realised what is happening. It is due to:
in the Button definitions.
it should be:
i.e. you are assigning the
editor
variable to theeditor
parameter.If at the top you'd used
var myEditor = new $.fn.dataTable.Editor(...)
then for the button you would useeditor: myEditor
.