In Wordpress Website, How to fix this issue Uncaught TypeError: $.fn.DataTable.Editor is not a const

IanBurman

Hi Team,

Actually, the datatables & Editor has a lot of features, really Nice!

But we are facing an issue when we integrated the dataTables & Editor into our table on the website. Can you please provide immediate assistance to resolve this issue. We have checked the Forum to resolve this issue, but no help from there to fix it.

Description of problem:
We are trying a custom plugin for our website, so we have purchased the product "DataTables Editor yearly subscription - 1 developer" So it's licensed. We downloaded all the files from the licensed account that are mentioned in the document and included those files like the one below. But still, we are getting the same issue in our console, and not the editor is enabled on our table.

Error messages shown:

jquery.min.js:2 Uncaught TypeError: $.fn.DataTable.Editor is not a constructor
    at HTMLDocument.<anonymous> ((index):340:14)
    at e (jquery.min.js:2:30038)
    at t (jquery.min.js:2:30340)

Below is our code:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.4.0/css/select.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/datetime/1.1.2/css/dataTables.dateTime.min.css"/>
<link rel="stylesheet" type="text/css" href="https://dev.bosveldjagters.co.za/wp-content/plugins/mms/dte/lib/Editor-2.0.10/css/editor.dataTables.min.css">


global $wpdb;
$records = $wpdb->get_results("SELECT * FROM wp_mms_branches");
$total_records = count($records);

    <div id="branches_table" class="table-responsive branches_table">
        <table id="branches" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th><?php _e( "BranchID" ) ?></th>
                <th><?php _e( "Tak" ) ?></th>
                <th><?php _e( "TakNaam" ) ?></th>
                <th><?php _e( "Disabled" ) ?></th>
                <th><?php _e( "BranchPhone" ) ?></th>
                <th><?php _e( "BranchEmail" ) ?></th>
            </tr>
        </thead>
        <tbody>
        <?php foreach ($records as $record) { ?>
            <tr>
                <td><?php echo $record->BranchID; ?></td>
                <td><?php echo $record->Tak; ?></td>
                <td><?php echo $record->TakNaam; ?></td>
                <td><?php echo $record->Disabled; ?></td>
                <td><?php echo $record->BranchPhone; ?></td>
                <td><?php echo $record->BranchEmail; ?></td>
            </tr>
        <?php } ?>
        </tbody>
        <tfoot>
            <tr>
                <th><?php _e( "BranchID" ) ?></th>
                <th><?php _e( "Tak" ) ?></th>
                <th><?php _e( "TakNaam" ) ?></th>
                <th><?php _e( "Disabled" ) ?></th>
                <th><?php _e( "BranchPhone" ) ?></th>
                <th><?php _e( "BranchEmail" ) ?></th>
            </tr>
        </tfoot>
    </table>
</div>
<script src='https://code.jquery.com/jquery-3.5.1.js' ></script>
<script src='https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js'></script>
<script src='https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js'></script>
<script src='https://cdn.datatables.net/select/1.4.0/js/dataTables.select.min.js' ></script>
<script src='https://cdn.datatables.net/datetime/1.1.2/js/dataTables.dateTime.min.js' ></script>
<script type="text/javascript" src="https://dev.bosveldjagters.co.za/wp-content/plugins/mms/dte/lib/Editor-2.0.10/js/dataTables.editor.min.js"></script>

<script type="text/javascript">
var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function() {
  editor = new $.fn.DataTable.Editor( { 
        ajax: 'https://dev.bosveldjagters.co.za/wp-content/plugins/mms/branches/branch_list_ajax.php',
        table: "#branches",
        fields: [ {
                label: "ID:",
                name: "BranchID"
            }, {
                label: "Tak:",
                name: "Tak"
            }, {
                label: "TakNaam:",
                name: "TakNaam"
            }, {
                label: "Disabled:",
                name: "Disabled"
            }, {
                label: "BranchPhone:",
                name: "BranchPhone"
            }, {
                label: "BranchEmail:",
                name: "BranchEmail"
            }
        ]
    } );
 
    // Activate the bubble editor on click of a table cell
    $('#branches').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.bubble( this );
    } );
 
    $('#branches').DataTable( {
        dom: "Bfrtip",
        scrollY: 300,
        paging: false,
        ajax: 'https://dev.bosveldjagters.co.za/wp-content/plugins/mms/branches/branch_list_ajax.php',
        columns: [
            {
                data: null,
                defaultContent: '',
                className: 'select-checkbox',
                orderable: false
            },
            { data: "BranchID" },
            { data: "Tak" },
            { data: "TakNaam" },
            { data: "Disabled" },
            { data: "BranchPhone" },
            { data: "BranchEmail" },
        ],
        order: [ 1, 'asc' ],
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
    } );
} );

</script>
 
/*
 * Example PHP implementation used for the index.html example
 */

// DataTables PHP library
include( plugin_dir_path( __DIR__ ) . '/dte/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;
 
// Build our Editor instance and process the data coming from _POST
$editor = Editor::inst( $db, 'wp_mms_branches', 'BranchID' );
Editor::inst( $db, 'wp_mms_branches' )
    ->fields(
        Field::inst( 'BranchID' ),
        Field::inst( 'Tak' ),
        Field::inst( 'TakNaam' ),
        Field::inst( 'Disabled' ),
        Field::inst( 'BranchPhone' ),
        Field::inst( 'BranchEmail' )
    )
    ->debug(false)
    ->process( $_POST )
    ->json();

allan

Hi Ian,

Many thanks for the code snippet. What you have there appears to be okay, so what I'm wondering is if jQuery might be getting loaded twice on the page? The second load would overwrite the first, thus making extensions such as DataTables and Editor unavailable.

Are you able to give me a link to the page so I can take a look? You can PM it to me by clicking my forum user name and then Send message if you like.

Allan

IanBurman

Hi Allen,

Thank you so much for your quick response. I have fixed that twice loading issue. After that, I got a console error like the one below so now I am checking on that. Can you please check this on your end and please assist with this. Thanks in advance!

jquery-3.5.1.js:4055 Uncaught TypeError: Cannot read properties of undefined (reading 'Editor')
    at HTMLDocument.<anonymous> ((index):327:33)
    at mightThrow (jquery-3.5.1.js:3762:29)
    at process (jquery-3.5.1.js:3830:12)

IanBurman

Allen, still has the same issue, that I mentioned initially.

On the file, have the below CSS & js files,

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.4.0/css/select.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/datetime/1.1.2/css/dataTables.dateTime.min.css"/>
<link rel="stylesheet" type="text/css" href="https://dev.bosveldjagters.co.za/wp-content/plugins/mms/dte/lib/Editor-2.0.10/css/editor.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://dev.bosveldjagters.co.za/wp-content/plugins/mms/dte/lib/Editor-2.0.10/css/editor.dataTables.min.css">

<script src='https://code.jquery.com/jquery-3.5.1.js' ></script>
<script src='https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js'></script>
<script src='https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js'></script>
<script src='https://cdn.datatables.net/select/1.4.0/js/dataTables.select.min.js' ></script>
<script src='https://cdn.datatables.net/datetime/1.1.2/js/dataTables.dateTime.min.js' ></script>
<script type="text/javascript" src="https://dev.bosveldjagters.co.za/wp-content/plugins/mms/dte/lib/Editor-2.0.10/js/dataTables.editor.js"></script>
<script type="text/javascript" src="https://dev.bosveldjagters.co.za/wp-content/plugins/mms/dte/lib/Editor-2.0.10/js/dataTables.editor.min.js"></script>

The same bug i.e,

Uncaught TypeError: $.fn.DataTable.Editor is not a constructor
    at HTMLDocument.<anonymous> ((index):364:14)
    at mightThrow (jquery-3.5.1.js:3762:29)
    at process (jquery-3.5.1.js:3830:12)

why we adding this script here to avoid this issue "$ is not a function". The default script didn't fix this issue so that.

Can you please assist for this. thanks

kthorngren

In lines 4 and 5 you are loading the editor.css twice and in lines 12 and 13 you are loading the editor.js twice. Load them only once. See if that fixes the issue.

Kevin

IanBurman

Hi Kevin,

I have added that for testing purposes to solve that issue, based on some other chat. After removing lines no 5 & 13, still am getting that issue.

I have shared that webpage link in a PM to you and Allen, Kindly check it and please assist to sort it out.

Thanks!

allan

Hi Ian,

I've just added a reply to your PM, but I thought I'd reply here as well in case anyone else finds this thread with the same question.

It looks like jQuery is being loaded 4 times and DataTables twice. Both should only be loaded a single time, else problems such as this will happen.

Regards,
Allan

IanBurman

Hi Allan,

As per your request, we loaded the jquery and datatables script one time, and after that still, we are getting the same error. The page link and some other details are provided on PM. Please check it and assist with this.

Thank you...

IanBurman

Link to test case:
https://dev.bosveldjagters.co.za/branch-list/

Description of problem:
Hi Team,
I have integrated the table with the Editor code which was what they mentioned in the Examples. When I submit the table data with changes the data request passed to the AJAX file, but I didn't get a response from the ajax file and that's not affected to my table. I thought the insert and update and delete process will automatically will happen and for that the query will automatically will generate by using the editor. But I think that's not? Here what I need to change it. Please check my codes below,

Debugger code (debug.datatables.net):

$tablename = 'branchList';
$recsource = "wp_mms_branches";
$coldata = "BranchID, Tak, TakNaam, Disabled, BranchPhone, BranchEmail";
$colheads = "BranchID, Tak, TakNaam, Disabled, BranchPhone, BranchEmail";
$colclasses = " , text-start, , tf-bi-check-circle, , " ;
$colfield_toEdit = "BranchID, Tak, TakNaam, Disabled, BranchPhone, BranchEmail, BranchFax, BranchAddress1";
$readonly = "rdly, , , rdly, , , , " ;

$edit_capability = "branch_edit";
$list_capability = "branch_list";

global $wpdb;
    $records = $wpdb->get_results("SELECT * FROM $recsource");
    $total_records = count($records);

    echo    " ". PHP_EOL ;
    echo    "<div id=\"mms_table\" class=\"table-responsive mms_table\">". PHP_EOL ;
    echo    "   <table id=\"mms_dte\" class=\"mms_dte $tablename display\" >". PHP_EOL ; 
    echo    "   <thead>". PHP_EOL ;
    echo    "        <tr>". PHP_EOL ;
 
    $colheads = str_ireplace (' ', '', $colheads);  //strip white space
    $colheads_arr = explode (",", $colheads);  //chg to array
    foreach($colheads_arr as $thcol) //loop over column heads array
            {
                echo "<th> ",_e( "$thcol" ) ,"</th>  ". PHP_EOL; 
            }
                /*echo "<th></th>  ". PHP_EOL; 
                echo "<th></th>  ". PHP_EOL; */
    echo    "    </tr>". PHP_EOL ; 
    echo    "</thead>". PHP_EOL ; 
    echo    "<tbody>". PHP_EOL ; 

    $coldata = str_ireplace (' ', '', $coldata);  //strip white space
    $coldata_arr = explode (",", $coldata);  //chg to array
    $colclasses = str_ireplace (' ', '', $colclasses);  //strip white space
    $colclasses_arr = explode (",", $colclasses);  //chg to array
    foreach ( $records as $rec ) { 
            echo "<tr>". PHP_EOL;
            foreach($coldata_arr as $key=>$tdcol) //loop over column data array
            {            
                if (substr($colclasses_arr[$key],0,3)=="tf-") {
                    echo "<td class=\"$tablename-$tdcol ", ($rec->$tdcol >0?substr($colclasses_arr[$key],3):'')," \">"," ","</td>  ". PHP_EOL; 
                } else {
                    echo "<td class=\"$tablename-$tdcol $colclasses_arr[$key] \">",$rec->$tdcol,"</td>  ". PHP_EOL; 
                }
            }
                    /*echo "<td></td>  ". PHP_EOL; 
                    echo "<td></td>  ". PHP_EOL; */
            echo "</tr>". PHP_EOL;
        } 
    echo    "</tbody>". PHP_EOL ; 
    echo    "<tfoot>". PHP_EOL  ; 
    echo    "    <tr>". PHP_EOL ; 
         
            foreach($colheads_arr as $thcol) //loop over column heads array
            {
                echo "<th> ",_e( "$thcol" ) ,"</th>  ". PHP_EOL; 
            }
                /*echo "<th></th>  ". PHP_EOL; 
                echo "<th></th>  ". PHP_EOL; */
        
    echo    "    </tr>". PHP_EOL ; 
    echo    "</tfoot>". PHP_EOL ; 
    echo    "</table>". PHP_EOL ; 

    /* Making the fields value for editor */
    $colfield_toEdit = str_ireplace (' ', '', $colfield_toEdit);  //strip white space
    $colfield_toEdit_arr = explode (",", $colfield_toEdit);  //chg to array
    $readonly = str_ireplace (' ', '', $readonly);  //strip white space
    $readonly_arr = explode (",", $readonly);  //chg to array

    $dte_fields = $dte_columns = $dte_queyCol = array();
    foreach( $coldata_arr as $coldata ){
        $dte_columns[] = '{ data: "'. $coldata .'" }';
    }

     foreach( $colfield_toEdit_arr as $coldata ){
        $dte_fields[] = '{ label: "'. $coldata . ':", name: "'. $coldata .'" }';
        $dte_queyCol[] = '`'. $coldata .'`';
    }

    $dte_fields = implode (",", $dte_fields);  //make to array
    $dte_columns = implode (",", $dte_columns);  //make to array
    $dte_queyCol = implode (" as ", $dte_queyCol);  //make to array
    ?>  

    <script type="text/javascript">
        var editor; // use a global for the submit and return data rendering in the examples
        jQuery(document).ready(function($) {
            editor = new $.fn.dataTable.Editor( {
                "ajax": "<?php echo plugin_dir_url( __DIR__ ).'branches/branch_list_ajax.php'; ?>",
                "table": "#mms_dte",
                "idSrc": "BranchID",
                "fields": [ <?php echo $dte_fields; ?>]
            } );

           $('#mms_dte').DataTable( {
                dom: "Bfrtip",
                ajax: '<?php echo plugin_dir_url( __DIR__ )."branches/branch_list_ajax.php"; ?>',
                columns: [ <?php echo $dte_columns; ?> ],
                select: true,
                buttons: [
                    { extend: "create", editor: editor },
                    { extend: "edit",   editor: editor },
                    { extend: "remove", editor: editor },
                    {
                        extend: 'collection',
                        text: 'Export',
                        buttons: [
                            'copy',
                            'excel',
                            'csv',
                            'pdf',
                            'print'
                        ]
                    }
                ]
            } );
        } );
    </script>

include( plugin_dir_path( __DIR__ ) . '/dte/lib/DataTables.php' );

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, 'wp_mms_branches', 'BranchID' )
    ->fields(
        Field::inst( 'BranchID' )->set(false),  // ID is automatically set by the database on create
        Field::inst( 'Tak' )
            ->validator( Validate::notEmpty( ValidateOptions::inst()
                ->message( 'A Tak is required' )  
            ) ),
        Field::inst( 'TakNaam' )
            ->validator( Validate::notEmpty( ValidateOptions::inst()
                ->message( 'A Tak is required' )  
            ) ),
        Field::inst( 'Disabled' ),
        Field::inst( 'BranchPhone' )
             ->validator( Validate::notEmpty( ValidateOptions::inst()
                ->message( 'A BranchPhone is required' )  
            ) ),
        Field::inst( 'BranchEmail' )
            ->validator( Validate::email( ValidateOptions::inst()
                ->message( 'Please enter an e-mail address' )   
            ) ),
        Field::inst( 'BranchFax' )
             ->validator( Validate::notEmpty( ValidateOptions::inst()
                ->message( 'A BranchFax is required' )  
            ) ),
        Field::inst( 'BranchAddress1' )
    )
    ->debug(true)
    ->process( $_POST )
    ->json(); 

AJAX file Data:

require_once($_SERVER['DOCUMENT_ROOT'].'/wp-load.php');
global $wpdb;
$records = $wpdb->get_results("SELECT * FROM `wp_mms_branches`");
$data_arr = array();
foreach ( $records as $rec ) { 
$data_arr[] = array(
  "BranchID" => $rec->BranchID,
  "Tak" => $rec->Tak,
  "TakNaam" => $rec->TakNaam,
  "Disabled" => $rec->Disabled,
  "BranchPhone" => $rec->BranchPhone,
  "BranchEmail" => $rec->BranchEmail,
  "BranchFax" => $rec->BranchFax,
  "BranchAddress1" => $rec->BranchAddress1,

);
}
$pages_array = array( 
  "data" => $data_arr,
  "options" => array(),
  "files" => array(),
  "debug" => array(
    "query" => "SELECT  `BranchID` as 'BranchID', `Tak` as 'Tak', `TakNaam` as 'TakNaam', `Disabled` as 'Disabled', `BranchPhone` as 'BranchPhone', `BranchEmail` as 'BranchEmail', `BranchFax` as 'BranchFax', `BranchAddress1` as 'BranchAddress1' FROM  `wp_mms_branches` ",
      "bindings"=> []
  )
);
echo json_encode($pages_array);

Kindly check it and let us know. Thanks in Advance...