Cant get Datatable Editor working . Throws some unknown error?
Cant get Datatable Editor working . Throws some unknown error?
danishmmir
Posts: 2Questions: 1Answers: 0
I am getting an error when i try to edit/ add/ delete a record in the datatable. The error looks like this in the console.
TypeError: dt[((((I1 + X2x.S4B) + X2x.S4B) + y5m) + B7j)](...)[0] is undefined [Learn More] dataTables.editor.min.js:812:246
on Expanding it shows this:
```Editor.prototype._tidy http://localhost/DataTables/extensions/Editor/js/dataTables.editor.min.js:812:246
Editor.prototype.edit http://localhost/DataTables/extensions/Editor/js/dataTables.editor.min.js:412:115
<anonymous> http://localhost/student_fees/:85:5
dispatch http://code.jquery.com/jquery-1.12.4.js:5225:16
add/elemData.handle http://code.jquery.com/jquery-1.12.4.js:4878:6```
My code is as written in the example on datatables.net wesite.
Javascript:
<html>
<head>
<title>Datatables</title>
<script src=//code.jquery.com/jquery-1.12.4.js type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" src="../Datatables/extensions/Editor/css/editor.dataTables.min.css">
<script type="text/javascript" charset="utf8" src="../DataTables/media/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="../DataTables/extensions/Editor/js/dataTables.editor.min.js"></script>
<style>
body {font-family: calibri;color:#4e7480;}
</style>
<script>
$(document).ready(function() {
var editor;
editor = new $.fn.dataTable.Editor({
"ajax" : "student.php",
"table" : "student_details",
"fields" : [{
"label" : "Roll No",
"name" : "roll_no"
},
{
"label" : "Class",
"name" : "class"
},
{
"label" : "Name",
"name" : "name"
},
{
"label" : "Father's Name",
"name" : "father"
},
{
"label" : "Mother's Name",
"name" : "mother"
},
{
"label" : "Residence",
"name" : "residence"
},
{
"label" : "Date of Birth",
"name" : "date_of_birth"
}]
});
$('a.editor_create').on('click', function (e) {
e.preventDefault();
console.log(editor);
editor.create({
title: 'Create new record',
buttons: 'Add'
} );
} );
$('#student_fees').on('click', 'a.editor_edit', function (e) {
e.preventDefault();
// alert("hello");
editor.edit( $(this).closest('tr'), {
title: 'Edit record',
buttons: 'Update'
} );
} );
$('#student_fees').on('click', 'a.editor_remove', function (e) {
e.preventDefault();
editor.remove( $(this).closest('tr'), {
title: 'Delete record',
message: 'Are you sure you want to delete the record?',
buttons: 'Delete'
} );
} );
$('#student_fees').dataTable({
"scrollX": true,
"pagingType": "numbers",
"processing": true,
"serverSide": true,
"ajax": "student.php",
columns : [
{data : "roll_no"},
{data : "class"},
{data : "name"},
{data : "father"},
{data : "mother"},
{data : "residence"},
{data : "date_of_birth"},
{data : null,
className : "center",
defaultContent : '<a href="" class ="editor_edit">Edit</a> / <a href="" class="editor_remove">Delete</a>'
}
]
// select: true,
// buttons: [
// { extend: "create", editor: editor },
// { extend: "edit", editor: editor },
// { extend: "remove", editor: editor }
// ]
} );
} );
</script>
</head>
<body>
<div class="container">
<a href="" class="editor_create">Create new record</a>
<table id="student_fees" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th >Roll No</th>
<th>Class</th>
<th>Name</th>
<th>Father's Name</th>
<th>Mother's Name</th>
<th>Residence</th>
<th>Date of Birth</th>
<th>Edit / Delete</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
Server-Side student.php
// DataTables PHP library
include( "../DataTables/extensions/Editor/php/DataTables.php" );
// Alias Editor classes so they are easy to use
use
DataTables\Editor,
DataTables\Editor\Field,
DataTables\Editor\Format,
DataTables\Editor\Mjoin,
DataTables\Editor\Options,
DataTables\Editor\Upload,
DataTables\Editor\Validate;
// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'student_details', 'roll_no' )
->fields(
Field::inst( "roll_no" )-> validator( 'Validate::notEmpty' ),
Field::inst( 'class' )-> validator( 'Validate::notEmpty' ),
Field::inst( 'name' ) ,
Field::inst( 'father' ),
Field::inst( 'mother' ),
Field::inst( 'residence' ),
Field::inst( 'date_of_birth' ))
->process( $_POST )
->json();
Where am i doing wrong?
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
At what point does this error happen? As soon as you load the page, or when you take some action on it? And if so, what is that action.
Allan
As for your question goes, it happens on first load. But i have already solved it.
All i needed to do was cut the
"serverSide":truefrom my code in JavaScript. Anyways, thanks for your interest.Ah I see. The problem was that the DataTables Ajax request is GET by default. You need to make it POST since you are using
->process( $_POST )- see this example.Allan