Data on DataTable disappears when page is refreshed.
Data on DataTable disappears when page is refreshed.
dataphpmysql
Posts: 65Questions: 17Answers: 0
Hello everyone,
I'm using DataTables with AWS API Gateway and Lambda. I managed to use API Gateway to send the JSON data to Datatables and everything shows fine when the page first starts. However, if I refresh the page, the data disappears and says 'No data available in table'. if I refresh again, it does show the data, if I refresh again then it does not show, etc (this pattern keep happening).
Here is the code:
<script>
$(document).ready(function () {
$('#dtBasicExample').DataTable({
ajax: {
method: 'GET',
url: 'https://webaddressgoeshere.amazonaws.com/prod',
dataSrc: ''
},
columns: [
{ "data": "projectID" },
{ "data": "name" },
{ "data": "type" },
{ "data": "description" },
{ "data": "assignee" },
{ "data": "dateDue" },
{ "data": "departmentID" }
]
});
$('.dataTables_length').addClass('bs-select');
});
</script>
Is there something I need to add to the datatable code in order for the table to always show the data even after the page is refreshed?
Thanks.
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
This is a duplicate to your other post. See the answer provided there. Please don't duplicate your posts.
https://datatables.net/forums/discussion/57369/using-datatables-with-aws-api-gateway#latest
Kevin
Hello,
Is best to continue discussion here since the other thread has a title that has nothing to do with my question.
Anyhow, there's nothing unusual in the browser's console. Is probably a DataTable 'settings' like maybe I need to add a 'refresh' code on DataTable? Maybe somewhere else instead of
$(document).ready(function () {
$('#dtBasicExample').DataTable({ ??
I guess I'll try adding the ajax call into whenever the page gets reloaded using JavaScript/jQuery. I just feel that that shouldn't be necessary and I'm probably missing something.
Thanks anyways.
That fine but duplicating your questions causes confusion and extra work for those trying to help.
When you reload the page Datatables will initialize the same as before. Its a clean new start and it will send the ajax request. As I asked in the other thread did you use the browser's developer tools to verify the response in the non-working case? When troubleshooting ajax request/response the developer tools are the best place to look. What is the response you get when the table doesn't load?
You also didn't answer the question asking about when you get the 403 response. Does the 403 response correspond to the times when the table doesn't load?
Kevin
So I think I confused your question. There's two URLs, the one I was talking about that gives the 403 response was the JSON URL (which is the Invoke URL from API Gateway) and that always gives the error but always shows the JSON data.
The other URL which I think is the one you're talking about is the URL of the actual web app that sometimes doesn't show the data on DataTables. This URL gives one error and one exclamation point every time regardless if the json data shows on DataTable or doesn't however the erros are a little different.
Errors when Data does NOT show on DataTables
Error:
Exclamation:
Errors when Data does show on DataTables
Error:
Exclamation:
All those files are from the framework I'm using which is MDB Bootstrap 4. Could these errors be causing the data not showing on DataTables?
Thanks.
UPDATE:
So after researching the error of Uncaught TypeError: Cannot read property 'addEventListener' I apparently needed to put the scripts at the end of the page instead. I did and it works.
Now only ONE exclamation appears on the developer's tools console and it always appears with or without the data showing on DataTables.
Here is the exclamation error:
Any idea how to fix this? Maybe that's what's causing the data to sometimes not appear on DataTables.
Hmmm maybe the issue is cause my Lambda function is synchronous and maybe that's what's causing the issue since is saying that it can't be synchronous so maybe it needs to be async??
I wish there was documentation on DataTables with AWS API Gateway and Lambda lol.
Reason I used sync function is cause that's what the docs say to use when using API Gateway. But I think I'm gonna give the lambda async with api gateway a try.
Can someone help me with this? I don't think it has anything to do with api gateway or anything but whenever I refresh data still doesn't show.
In my previous post:
You still haven't provided this information. Please start there.
Kevin
Hi Kevin,
Thanks for the reply. I answered those questions on the first reply of that post:
In the developer tools on the 'console' part (that's where you want me to look at right?) it shows one exclamation point every time regardless if the json data shows on DataTable or doesn't.
The exclamation (in yellow) error that shows when Data either does or does not show on DataTables is:
jquery-3.4.1.min.js:2 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
send @ jquery-3.4.1.min.js:2
load (async)
send @ jquery-3.4.1.min.js:2
ajax @ jquery-3.4.1.min.js:2
k.fn.load @ jquery-3.4.1.min.js:2
(anonymous) @ awsapp-bucket.s3-web…1.amazonaws.com/:36
e @ jquery-3.4.1.min.js:2
t @ jquery-3.4.1.min.js:2
setTimeout (async)
(anonymous) @ jquery-3.4.1.min.js:2
c @ jquery-3.4.1.min.js:2
fireWith @ jquery-3.4.1.min.js:2
fire @ jquery-3.4.1.min.js:2
c @ jquery-3.4.1.min.js:2
fireWith @ jquery-3.4.1.min.js:2
ready @ jquery-3.4.1.min.js:2
B @ jquery-3.4.1.min.js:2
All those files are from the framework I'm using which is MDB Bootstrap 4. Could these errors be causing the data to not show on DataTables? The strange thing is that it shows the same error regardless if data shows or not. Should I perhaps be looking at another part in the developer tools for better help?
Thanks.
Hey Kevin,
So in the developer tools I went to Network -> XHR and clicked on whats making the call and in the response its finally giving me two different things.
When data shows on DataTable it gives me this response:
When data does not show it gives me this response:
Maybe that's the error that's causing the data to not show?
That's what I've been asking for. Take a look at your server logs to determine why this error is occurring.
Kevin
Thanks a lot!!
I checked in CloudWatch the lambda function I was using with API Gateway and found a description of the error where it said to add sql.close(). Makes sense cause perhaps not closing the connection before refreshing the page caused an issue after the refresh and it trying to make a new sql connection when it hadn't closed yet.
Anyhow, I added the sql.close() in the code and it fixed the issue. Now the data appears whenever I refresh the page.
Thanks for the help!