How do I show a "Loading..." message when I load the table from a new Ajax call?
How do I show a "Loading..." message when I load the table from a new Ajax call?
travelerjjm
Posts: 11Questions: 1Answers: 0
I am using 1.10.1. I have a working button (called running) like this:
$('#reload').click(function (){
var path = "/runningdata";
var dt=$('#running').DataTable( );
dt.clear();
dt.draw();
dt.ajax.url(path).load();
});
It does not display the "Loading... Message, though. How can I get that displayed on a subsequent load?
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Do you have the
processing
option enabled?Allan
Thanks for the quick reply. Sorry, yes.( I want to link to the page, but it is behind a password.) Here is the initial setup:
as I noted, it works for the first load...
Interesting - it should work or all loads and that does appear to be the case here: http://live.datatables.net/lomapoke/1/edit .
Can you link to a test case showing it not working please.
Allan
I will try to do a link. Right now it is password protected and I need to find a way to create a more public page.
It is perhaps odd then when I click on reload I don't get a Loading message on your link either. I tried it in Firefox 30.0, Chrome and IE 11.
--john
It is extremely fast (since I haven't got a delay in the loading of the server-side data), so it only flickers into place and is then very quickly removed.
Allan
I have not been able to create a public page. I created one with my reload code and the example from http://datatables.net/examples/server_side/row_details.html, but of course that works and displays the message on reload I can post the(minimally sanitized) page source, but it is about 250 lines long. Will that help?
What I think I would need is a JSFiddle, http://live.datatables.net or a link to a page showing the problem so I can reproduce what is going wrong and debug it.
Allan
I moved my stuff and your data/example as noted above and tried it out. I am finally able to duplicate the issue! Before adding the stylesheets ac.css and usage.css the "Processing..." message was to the right of the table, not directly over the content.
(edited)
I found the issue, but not the fix. I made the div containing the table in my "non-working" version very wide, like 1800 px. I got the "g..." at the edge of the table: it was behind the table.
Here is the link to thed demo version: http://www.iamthesilly.com/testfordt.html
I am not sure what css conflicts. I saw the message until I added
usage.css
andac.css
.(The date stuff was to see if the date picker I used was an issue.)
Add:
div.dataTables_processing { z-index: 1; }
to your CSS and that should solve it. I'll look at adding something similar into the default CSS.Allan
Fantastic! Worked like a charm. Thank you very much Allan.