Cannot read property 'error' of null occurs almost on every click

elimariaaa

Hello,

I'm creating a custom plugin for my Wordpress site using datatables. So far, it's okay but once I click on sort, end of page(pagination), etc., I always encounter this error:

Uncaught TypeError: Cannot read property 'error' of null
at Object.success (jquery.dataTables.js?ver=4.7.5:3899)
at i (jquery.js?ver=1.12.4:2)
at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2)
at y (jquery.js?ver=1.12.4:4)
at XMLHttpRequest.c (jquery.js?ver=1.12.4:4)

And when I track jquery.dataTables.js?ver=4.7.5:3899, this is where the error is (line 3896):

var baseAjax = {
    "data": data,
    "success": function (json) {
    var error = json.error || json.sError;
        if ( error ) {
            _fnLog( oSettings, 0, error );
        }
            oSettings.json = json;
            callback( json );
        },
        "dataType": "json",
        "cache": false,
        "type": oSettings.sServerMethod,
        "error": function (xhr, error, thrown) {
            var ret = _fnCallbackFire( oSettings, null, 'xhr', [oSettings, null, oSettings.jqXHR] );

            if ( $.inArray( true, ret ) === -1 ) {
                if ( error == "parsererror" ) {
                    _fnLog( oSettings, 0, 'Invalid JSON response', 1 );
                }
                else if ( xhr.readyState === 4 ) {
                    _fnLog( oSettings, 0, 'Ajax error', 7 );
                }
            }

            _fnProcessingDisplay( oSettings, false );
        }
    };

What could be the issue?

Any help is highly appreciated. Thanks!

-Eli

bindrid

why are you messing with success:function()? Since the ajax is embedded in Datatables, it expects to use it and you are overriding it.

If you need to manipulate or track what is being sent to the client, I recommend using dataFilter.

    "data": function(dtParms) {
    // since you are defining data somewhere to pass back to the server
   // I combined them with the default parameters
    dtParms.data = data;
    return dtParms},
    // changed success to dataFilter
    "dataFilter": function (json) {
        console.log(json);
        if(json) {
    
            var res = JSON.parse(json);
           // these are errors you are send back from the server?
           var error = json.error || json.sError;
        if ( error ) {
            _fnLog( oSettings, 0, error );
        }
        }
              return json;
        },

I think you must be running serverSide true because a column click is triggering an ajax call

elimariaaa

Hi Bindrid,

Thanks for your answer. I think you've misunderstood my question.

I'm not messing with the success:function(), I just traced that the error comes from there when I try to click on pagination, pagelength, sorting, etc.

And yes, I'm using server-side, but that should not limit what I'm trying to achieve.

-Eli

bindrid

Again, any one of those actions trigger a server side call when serverSide:true.
From what I see, for some reason, your response is empty.
From what I see, its the only place you use json.error.

At the very least, add the dataFilter section from above to verify what you are getting back from the server and also verify what I still think is happening.

I would put a console.log in your success function too.

bindrid

also take a look at this thread
https://datatables.net/forums/discussion/comment/61103/#Comment_61103

allan

It sounds like the server might be returning simply null or perhaps {"data":null} which DataTables does not expect. If there are no results, the response data array should be an empty array.

We'd really need a link to a test case showing the issue to fully understand the issue though.

Allan

elimariaaa

Hi Allan,

Thanks for your reply. It should not be null because there are lots of data. Simply clicking on the last page button for example should not be a problem.

The post.php is giving the right data. I think the issue lies on datatables.js.

Please feel free to log in on our site (I don't mind).

Username: retracted
Password: retracted
Link: http://oss-dev.forexworld.us/wp-login.php
The page where the datatables is:
http://oss-dev.forexworld.us/datatables-test/?preview_id=933&preview_nonce=4ded574d00&_thumbnail_id=-1&preview=true
Or: http://oss-dev.forexworld.us/datatables-test/

I'd really appreciate your help.

Eli

allan

Hi Eli,

Thanks for the link and login info - I've removed it just now just in case you didn't mean to make it completely visible to the whole internet .

Whenever that error occurs, there is no data being returned from the server from the Ajax request to get the data to display. No even null - just a zero length string.

That suggests that there is an error in the server-side script. I would suggest you start by looking at the error logs on your server to see if there is anything reported there. My guess is that there is a row of data in the table which is causing character encoding issues.

Also worth noting that with only 321 rows, it really isn't worth using server-side processing. Only when you get to tens of thousands of rows is it worth it.

Allan

elimariaaa

Hi Allan,

The server side script also comes from datatables - post.php and ssp.class.php. The only line of code I changed is the database table to use.

This is the function code that calls the datatables:

function cq_datatables(){
  global $wpdb;
      $datatable_id = 6;
      //get the table_name from id
      $retrieve_cq_data = $wpdb->get_row( "SELECT table_name FROM ".$wpdb->prefix."datatables WHERE id = ".$datatable_id."", ARRAY_A );
      $retrieve_table_name = $retrieve_cq_data['table_name'];

      if($retrieve_cq_data > 0){
    $cq_column_fields = $wpdb->get_results("DESCRIBE ".$retrieve_table_name."");
    $cq_existing_columns = [];
    $arraySize = count($cq_column_fields);
    $i = 1;
    foreach ( $cq_column_fields as $cq_column_field ) {
        // Build an array of Field names
        $cq_existing_columns[] = $cq_column_field->Field;
        $comma = ($i<$arraySize) ? ", " : "";
        $test .= '{"data": "'.$cq_column_field->Field.'"}'.$comma;
        $i++;
    }
    // require_once("datatables/scripts/post.php");
?>
<script type="text/javascript">
// Setup - add a text input to each footer cell
jQuery(document).ready(function($) {
$('#cq-datatables-'+<?php echo $datatable_id; ?>+'tfoot th').each( function () {
    var title = $(this).text();
    alert(title);
    $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
$('#cq-datatables-'+<?php echo $datatable_id; ?>).DataTable( {
    "processing": true,
    "serverSide": true,
    "ajax": {
        "url": "<?php echo plugins_url(); ?>/cq-datatables/datatables/scripts/post.php",
        "type": "POST",
        "data": { table_name: "<?php echo $retrieve_table_name; ?>"}
    },
    "columns": [<?php echo $test; ?>],
    "dom": '<"row"<"col-md-12"<"pull-right"B>l>><"custom-spacer"f>rtip',
    "buttons": [
        'excelHtml5',
        'csvHtml5',
        'pdfHtml5',
        'print',
        'colvis'
    ]
} );
} );

</script>
    <table id="cq-datatables-<?php echo $datatable_id; ?>" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>option_id</th>
                <th>option_name</th>
                <th>option_value</th>
                <th>autoload</th>
            </tr>
        </thead>
    </table>
<?php       
}

}

The table is just a dummy one to make sure that the datatables works.

Thanks
Eli

tangerine

I would suggest you start by looking at the error logs on your server to see if there is anything reported there.

Did you check the error logs?

Also worth noting that with only 321 rows, it really isn't worth using server-side processing. Only when you get to tens of thousands of rows is it worth it.

Why are you still using server-side processing?

elimariaaa

Hi tangerine,

No errors. I decided to use another dummy data instead. It's now working. But I see the error here saying my table name is empty: http://oss-dev.forexworld.us/wp-content/plugins/cq-datatables/datatables/scripts/post.php

{"error":"An SQL error occurred: SQLSTATE[42000]: Syntax error or access violation: 1103 Incorrect table name ''"}

Although I sent it as an ajax.data through my function (see code above). What could be the issue this time?

allan

You can't just use a simple request to get the data with server-side processing. You must submit all the parameters that are required like DataTables does.

I'd still suggest you check the server's error logs and check to see if you actually need server-side processing.

Allan