Cannot read property 'Editor' of undefined

Cannot read property 'Editor' of undefined

alexisgarci11alexisgarci11 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

Answers

  • kthorngrenkthorngren Posts: 13,114Questions: 25Answers: 3,081
    Answer ✓

    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

  • alexisgarci11alexisgarci11 Posts: 7Questions: 2Answers: 0

    thanks kevin i was missing that

Sign In or Register to comment.