Help with getting AJAX successful response to display records.
Help with getting AJAX successful response to display records.
glimpsed_chaos
Posts: 140Questions: 30Answers: 4
Description of problem: No error message. Table displays message that "No matching records found".
Network tab shows the call is successful (200) and the response is correct. If I manually apply this same data (no ajax) it works too, so it does not seem to be data structure related.
I have tried the simplest setup here, no filters, searching, etc on the table.
I must be missing something, but I cannot see it. I have looked at the examples and tried to setup something easy based on those. First time setting up with ajax, and a little help here would be greatly appreciated.
var table = $('#example2').DataTable({
ajax: {
url: "@Url.Action("GetAllEvents")",
type: "POST",
},
processing: true,
serverSide: true,
});
The data returned looks like this:
{
"draw": 1,
"recordsTotal": 3,
"recordsFiltered": 3,
"data": [
{
"EventId": 3,
"Occurred": "2024-07-01T06:11:00",
"StatusName": "Acknowledged",
"PriorityName": "Low",
"PriorityName": "Critical",
"Note": null,
"Email": "my@email.com",
"Incident": null,
"EventHost": "host1",
"EventMessage": "host1 message",
"SentBy": "apiclass"
},
{
"EventId": 2,
"Occurred": "2024-07-01T06:11:00",
"StatusName": "Closed",
"PriorityName": "Low",
"PriorityName": "Critical",
"Note": null,
"Email": null,
"Incident": null,
"EventHost": "host2",
"EventMessage": "host2 message",
"SentBy": "serviceA"
},
{
"EventId": 1,
"Occurred": "2024-06-01T06:31:00",
"StatusName": "Open",
"PriorityName": "Low",
"PriorityName": "Critical",
"Note": "This is a test note.",
"Email": null,
"Incident": "0000001234",
"EventHost": "host3",
"EventMessage": "host3",
"SentBy": "serviceA"
}
]
}
This question has an accepted answers - jump to answer
Answers
You row data are objects not arrays so you need to use
columns.datato define the columns. See the data docs for more details and this example.Kevin
Corrected a few things above but still no luck.
I am getting an error message now - 'Cannot read properties of undefined (reading 'length') in the browser. (in the 'for' below from datatables.min.js v2.0.8):
Datatable corrected:
Data corrected:
@kthorngren Looks like we were posting about the same time. I did find that and tried as shown above. Now I get an error message per above.
Typically this error occurs when the table columns defined in HTML doesn't match the number of columns defined with
columns.data.columns.datahas 11 columns. How many do you have defined in the -tag thead`?To help debug this we will need to see a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
I have 11 in the html.
I will see if I can replicate in a test case.
@kthorngren Here is a test case - https://live.datatables.net/ridaxuru/1/edit
Not sure if I got it exactly right since I am loading data from a var now but it does recreate the error.
You have the
dataandcolumnsinside theajaxoption. I commented out the -option ajaxoption and}` at the end of the Datatables options.https://live.datatables.net/vekobede/1/edit
Looks like you have the same issue with the code above. I didn't notice it before. This also means that the
serverSideoption is not enabled. I noticed the JSON response has"draw": 1,. Is this hardcoded since server side processing isn't enabled? Its used as a sequence number for the requests. Make sure you are handling as documented in the SSP protocol docs.Kevin
@kthorngren ok, feels a bit dumb I did not see that myself.
I corrected that locally. Now I am back to having no error and "No matching records found" appearing in the table. But the network call for "GetAllEvents" returns my data.
Maybe I am missing something here, if the data was local or in a variable, I might have something like "data: data.data" as show in the live.datatables linked.
Am I supposed to specify that somewhere here for the response? Might have misread, but I was sure I read that DataTables handles the success response here.
The JSON response looks correct. The row data is in the expected
dataobject as described in the Ajax docs..Is the output you posted from the browser's network inspector?
Make sure there is no other data in the JSON response. I've seen cases where some text was prefixed to the JSON by the server script.
If using Chrome there is a Preview tab that will show the data as a Javascript object that you can browse. Does this look correct?
What happens if you comment out
serverSide: true,?Paste the Ajax request payload parameters and the JSON response from the browser's network inspector into the thread.
Possibly there is an event firing that is performing a search. Do you see a second request to the server that might return 0 records?
I would probably put a debugger breakpoint on the statement after the Datatables initialization to see if the table initially populates then is cleared by something.
Kevin
@kthorngren - Thank you for your patience and help with this. I'm not opposed to putting in the work but just trying to make sure I did not miss something. This is my first shot using Ajax/Serverside, previous work has generally been in using JavaScript sourced data.
The data I posted was from the controller returning the data for the ajax call.
If I edit out "serverSide: true", I get a 200 OK, good response, no payload under Network. But I also get the "TypeError: Cannot read properties of undefined (reading 'length')" in datatables.
With "serverSide: true", no error.
I only see 1 event firing, cleared it and checked again, just 1 time.
Here's the payload:
This is the data from the Response tab under Network:
And just in case, here's the response from the controller:
I wonder if the problem is due to return "pretty JSON" with the white space, etc. Its valid JSON according to https://jsonlint.com/ but I wonder if it affects how its parsed. It does't seem to process the data structures but sees it as a simple string.
If you past the string you posted from the Response tab at https://jsonlint.com/ it doesn't format the output. However if you paste the example I posted below the string is formatted when validated. Maybe the same is happening when jQuery is processing the JSON response.
Can you turn off the formatting of the JSON response so it looks more like this in one line?
FYI its always best to provide us with the JSON response from the browser's network inspector instead of output from the server code.
Kevin
@kthorngren - Yes, I can do that.
This does not pass validation at https://jsonlint.com/
I am assuming that it is due to the Unicode entries for double quotes.
However, if I just make a plain jQuery Ajax call to the same and console log the results, I get the response without the Unicode.
I cannot see where this is occurring as my method returning this JSON to the controller has it without the Unicode, my controller responds without the Unicode.
In both cases, the Response tab in the shows both with the Unicode.
This does pass validation.
Maybe barking up the wrong tree in regard to that.
Again, I may be missing something fundamental here. Such as how the data from the response gets applied. I have been assuming that it is handled by DataTables since it handles the response from the call.
I get the same if I copy that string into a test case and console.log it:
https://live.datatables.net/zafukamo/1/edit
Use the browser's network inspector to see the response from the plain jQuery ajax call.
There must be something at the server that is using unicode when generating the JSON response. What you see in the browser's network inspector is before the JSON gets to Datatables or jQuery ajax. What language is your controller and maybe post the code used to generate the JSON.
The
ajaxoption uses jQuery ajax() to fetch the data. From theajaxdocs:Kevin
@kthorngren - Thank you for your assistance Kevin!
Turns out it was something and that was me JSON serializing or least something in that area.
I went back to a video that I found to give me a basic usage and they just created a new List<object> on the controller to show a 3-column data structure. Anyways, I mimicked that to ensure I could get their example working for me.
Then I worked backwards into my code and saw where I could fix this in my repository class. Now it appears in my table and as proper JSON in the Response Network tab.
Thank you for your time and patience. Hopefully, it was not too much of an inconvenience.
I forgot to say that this happens quite often
Its not always easy to see that the options are inside other options.
Nope, glad you were able to find and fix the problem.
Kevin