Cannot read property 'Editor' of undefined
Cannot read property 'Editor' of undefined
alexisgarci11
Posts: 7Questions: 2Answers: 0
Hi guys, im following this example but i always get js error.
https://editor.datatables.net/examples/inline-editing/simple.html
I have download the Editor files and the files are new so i guess its not a license problem.
this is my code:
?php
$mysqli = new mysqli("127.0.0.1", "root", "", "vzsdgvsdb");
// Check connection
if ($mysqli->connect_errno) {
echo "Failed to connect to MySQL: " . $mysqli->connect_error;
exit();
}
// DataTables PHP library
include("lib/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,
DataTables\Editor\ValidateOptions;
// Build our Editor instance and process the data coming from _POST
Editor::inst($db, 'datatables_demo')
->fields(
Field::inst('first_name')
->validator(Validate::notEmpty(ValidateOptions::inst()
->message('A first name is required')
)),
Field::inst('last_name')
->validator(Validate::notEmpty(ValidateOptions::inst()
->message('A last name is required')
)),
Field::inst('position'),
Field::inst('email')
->validator(Validate::email(ValidateOptions::inst()
->message('Please enter an e-mail address')
)),
Field::inst('office'),
Field::inst('extn'),
Field::inst('age')
->validator(Validate::numeric())
->setFormatter(Format::ifEmpty(null)),
Field::inst('salary')
->validator(Validate::numeric())
->setFormatter(Format::ifEmpty(null)),
Field::inst('start_date')
->validator(Validate::dateFormat('Y-m-d'))
->getFormatter(Format::dateSqlToFormat('Y-m-d'))
->setFormatter(Format::dateFormatToSql('Y-m-d'))
)
;?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="jquery.dataTables.min.css"/>
<link rel="stylesheet" href="buttons.dataTables.min.css"/>
<link rel="stylesheet" href="select.dataTables.min.css"/>
<link rel="stylesheet" href="dataTables.dateTime.min.css"/>
<link rel="stylesheet" href="editor.dataTables.min.css"/>
<script src="jquery-3.5.1.js"></script>
<!--<script src="jquery.dataTables.min.js"></script>-->
<script src="dataTables.buttons.min.js"></script>
<script src="dataTables.select.min.js"></script>
<script src="dataTables.dateTime.min.js"></script>
</head>
<body class="nav-toggle">
<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>
<script>
var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
ajax: "staff.php",
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"
}
]
} );
// Activate an inline edit on click of a table cell
$('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
editor.inline( this );
} );
$('#example').DataTable( {
dom: "Bfrtip",
ajax: "staff.php",
order: [[ 1, 'asc' ]],
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, '$' ) }
],
select: {
style: 'os',
selector: 'td:first-child'
},
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
} );
} );
</script>
</body>
</html>
So if i leave that line commented (the line that get the datatables.min.js) i get the following erros:
dataTables.buttons.min.js:6 Uncaught TypeError: Cannot read property 'ext' of undefined
at dataTables.buttons.min.js:6
at dataTables.buttons.min.js:5
at dataTables.buttons.min.js:5
Uncaught TypeError: Cannot set property 'select' of undefined
at dataTables.select.min.js:25
at dataTables.select.min.js:15
at dataTables.select.min.js:15
jquery-3.5.1.js:4055 Uncaught TypeError: Cannot read property 'Editor' of undefined
at HTMLDocument.<anonymous> ((index):52)
at mightThrow (jquery-3.5.1.js:3762)
at process (jquery-3.5.1.js:3830)`
dataTables.buttons.min.js:6 Uncaught TypeError: Cannot read property 'ext' of undefined
at dataTables.buttons.min.js:6
at dataTables.buttons.min.js:5
at dataTables.buttons.min.js:5
If i let it on i get:
Uncaught TypeError: $.fn.dataTable.Editor is not a constructor
at HTMLDocument.<anonymous> ((index):43)
at mightThrow (jquery-3.5.1.js:3762)
at process (jquery-3.5.1.js:3830)
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Doesn't look like you are loading the editor.css and editor.js fils. See the Editor install docs and see this basic example. Look at both the Javascript and CSS tabs.
Kevin
thanks kevin i was missing that