DataTables Warning: table id=table_id - Invalid JSON Response.

cbasmadjian

I am receiving this error "DataTables Warning: table id=table_id - Invalid JSON Response. For more information about this error..." I have followed the link that the error suggests and diagnosis problem, but I am still unclear as to what the issue is.

According to XHR request found within Chrome's Network tab I am able to see my response. I get back JSON data. When navigating to http://jsonlint.com/ and pasting the JSON response that was captured it states "Valid JSON" from the results section.

So I am clueless as to why it states that it is invalid when jsonlint says it's valid. Can some one help me to understand how to get this to work?

Client SIde Script

$(document).ready( function () {
    //$('#table_id').DataTable();
    //var table = $('#table_id').DataTable({
    //   data: data
    //});
    $('#table_id').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": {
             "url": "../wp-content/mu-plugins/invSalon.php",
             "dataType": "jsonp"
        },
        "columns": [
            { "data": "ID" },
            { "data": "name" },
            { "data": "thumb_url" },
            { "data": "address1" },
            { "data": "address2" },
            { "data": "city" },
            { "data": "state" },
            { "data": "postal_code" },
            { "data": "phone" },
            { "data": "longitude" },
            { "data": "latitude" }
        ]
    } );
} );

Server Side Script

    include_once(dirname(__DIR__) . '/DataTables-Editor/DataTables.php');
    use DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Join,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate;
    
    global $db;
    $editor = Editor::inst( $db, 'MyTableName' );

    $editor->fields(
            Field::inst( 'ID' ),
            Field::inst( 'name' ),
            Field::inst( 'thumb_url' ),
            Field::inst( 'address1' ),
            Field::inst( 'address2' ),
            Field::inst( 'city' ),
            Field::inst( 'state' ),
            Field::inst( 'postal_code' ),
            Field::inst( 'phone' ),
            Field::inst( 'longitude' ),
            Field::inst( 'latitude' )
        )
        ->process( $_POST )
        ->json();

If I remove the ->json() line of code I no longer see the JSON data on my website, but putting it there it dumps the whole entire JSON data above my datatable. Not sure if that helps, but just wanted to state another strange thing that has been occuring.

Any help would be greatly appreciated.

Thank you.

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

cbasmadjian

I found another question that is similar to this that suggested to use the debugger datatables.

Maybe this might help understanding where I went wrong. You can see the JSON response with it.

http://debug.datatables.net/ucijeg

allan

The JSON reply looks absolutely fine, which suggests to me that there is a UTF8 BOM in the data returned by the server. That is a hidden character sequence which identifies the file as UTF8, but annoyingly makes it invalid JSON!

The UTF8 BOM is actually redundant, and can be safely removed. Are you on a linux system? If so, could you use the find command shown here to see if there are any files with the BOM?

If you can give me a link to your page I can check it directly (use curl to save the Ajax response into a file and then use a hex editor to check for the BOM if you want to try it yourself).

Thanks,
Allan

cbasmadjian

Per your request. Here is the link to my page which uses the datatable with access to a database.

http://www.fifth-cloud.com/hairstyle-photo-submission/

In my original post you have my server side and client side scripts.

You are correct that my server is on a linux machine.

What do you need me to do to fix this? Should I run that script you posted the link to? Guess need to talk with my administrator on how to do this.

Thoughts?

allan

Thank you for the link - I would never have found the issue without that.

The problem is that you are using dataType: 'jsonp' but the server is not returning a JSONP response!

You either need to remove the dataType and just have it expect regular JSON, or update the server-side to return JSONP. You'd only do the later if you are making cross domain requests (which you don't appear to be doing).

Allan

cbasmadjian

Thanks for the help Allan. That sure did the trick. Didn't realize I was using "JSONP".

One question I have is how do I get rid of the data dump of my database? If you go back to that url you will see at the top something is dumping all the data up there.

Any suggestions on where to look? Could it be my server side script?

Thanks!