Alert "JSON invalid" but JSON is perfectly valid and table loads correctly after "ok"

jaeweb

Hi

First of all: DataTables is such e great tool, thank you very much!

I'm using DataTables with ajax Data from Editor PHP-Script like https://editor.datatables.net/examples/simple/join.html

There is a very strange error that occured all of a sudden even without changing any of the code:

1. Alert warning "Invalid JSON response" appears (this one: https://datatables.net/manual/tech-notes/1)
2. Cheching "Network" -> "Response" after clicking "ok": JSON is perfectly valid and table loads correctly
3. No further errors all just works fine
4. At some point 1.occurs again

First I thought it must be some kind of illegal character in the JSON data like " or \ or ', but everything looks perfectly fine.

The error just appears from time to time, and mostly after entering a search term, not instantly, but 1 second delayed.

In search for causes past the last couple of hours I found the following possible connection: There is another ajax call running every 30 seconds to alert the user if a certain condition is met, but is completely independent to the datatables ajax call. The script also loads on other pages with same DataTables configuration witout problems. But somehow on this "special" page the "Invalid JSON response" warning seems to be connected to this.

If anyone can give me a clue or if anyone experienced the same. Any hint will be highly appreciated. Thank you very much in advance!

kthorngren

Did you use JSON Lint to validate the JSON?

Can you post a snippet of the JSON response or a link to your page? If not maybe use the debugger to collect the Datatablles info when the error occurs. I believe it will contain the JSON response for the developers to look at.

Without seeing the response it will be hard to debug or offer suggestions.

Kevin

jaeweb

Hi

Thanks for your reply. Unfortunately, I can't. It's running in a productive LAN environment and the data is extremly sensitive.

The only thing I can tell is that it has definitly to do with another ajax call that is running every 30 seconds. Somehow, datatables tries to load this data into the table, but of cource this data is completely different in structure.

Well I almost don't dare to aks this, because this seems utterly absurd: How can datatables load data from other ajax calls? Is that even possible?

kthorngren

Well I almost don't dare to aks this, because this seems utterly absurd: How can datatables load data from other ajax calls? Is that even possible?

Datatable will only load the data that it requests via the ajax optionor-api ajax.reload()` or a response from the Editor. Datatables won't intercept a jQuery ajax() request to use as a data source.

When exactly does the error occur? Is it an Editor update or some other operation?

You didn't say if you checked the Invalid JSON response with JSON Lint.

Kevin

kthorngren

I should mention that the info collected with the debugger is only accessible by the developers. Also you can make arrangements with the developers to help debug the problem so your sensitive data is not shared here. Send a PM to @allan or @colin to find out how to get their help directly.

Kevin

jaeweb

Hi Kevin

Thank you very much for your reply. Let me say, it got me on the right path. :-)

The problem is not the other ajax call that runs every 30 sec but PHP timout after 30 sec, LOL! I knew it must be some kind of coincidence...

Ok, finally I got to the bottom of this, but: I don't understand why data can still be loading if everything is already shown in the table. First draw of the PHP source takes over 30 seconds, but reults appear after 2-3 seconds. How can I stop this first draw from happening?

jaeweb

Or even better: How can I start with an empty table and wait for user to search?

kthorngren

First draw of the PHP source takes over 30 seconds, but reults appear after 2-3 seconds.

Not sure what this means. Are you using ajax to fetch the data and also using PHP to draw the table?

Maybe you can post your code so we can try understanding what your code is doing.

Kevin

allan

How can I start with an empty table and wait for user to search?

Don't use the ajax option - just have data: [] (i.e. no information), then when your user searches in your input bar, make an Ajax call to get the data to show and add it using rows.add().

Allan

jaeweb

Hi Kevin

I founda solution, thank you very much for your help!

It is a table with meeting items. So I just start with an initial search for todays date (to show only meetings from today) and if a user clears the search input I'll overwrite it again with todays date. All other searches are acceptetd an working. Maybe this helps someone with a similar problem:

tableTermine = $('#dataTableTermine').DataTable({
    dom: "Blfrtip",`
    ajax: {
        url: "assets/controllers/termine.php", 
        type: 'POST',
        data: function ( d ) {
            // Date search
            var date_search = d.search.value;
            if (date_search == ""){
                d.search.value = getDatetime("yyyy-mm-dd");
                $("#dataTableTermine_filter input").val(getDatetime("dd.mm.yyyy"));
            }
            // Check for Date dd.mm.yyyy
            if ( (date_search.split(".").length - 1) == 2 && date_search.length == 10) {
                // change format of date to yyyy-mm-dd
                d.search.value = date_search.split(".")[2]+"-"+date_search.split(".")[1]+"-"+date_search.split(".")[0];
            }
        }
    },
    search: {
        search: getDatetime("dd.mm.yyyy")
    }
});

*getDatetime() is a handwritten function to get todays date in a custom date format