How do I show a "Loading..." message when I load the table from a new Ajax call?

travelerjjm

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?

allan

Do you have the processing option enabled?

Allan

travelerjjm

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:

$(document).ready(function() {
    var dt = $('#running').DataTable( {
    "dom": '<"clear">lfTrtip',
    "oTableTools": {
        "sSwfPath": "/swf/copy_csv_xls_pdf.swf",
    "aButtons":[
        "copy",
        "csv",
        "pdf",
        "print"
    ]},

        "processing": true,
        "serverSide": false,
        "ajax": {
        "url":"some-site-with-data",
        "type":"GET"
    },
        "columns": [... ],
        "order": [[1, 'asc']]
    } );
...
});

as I noted, it works for the first load...

allan

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

travelerjjm

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

allan

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

travelerjjm

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?

allan

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

travelerjjm

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 and ac.css.
(The date stuff was to see if the date picker I used was an issue.)

allan

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

travelerjjm

Fantastic! Worked like a charm. Thank you very much Allan.