Question

So I have a table of data, and I’m getting data back using ajax. When data is being retrieved, the data from the table disappears and a small little loading circle appears. I’d prefer for the data to stay (I know how to do that) and for the loading circle to appear over the table in the center of it (not necessarily vertically, just at least horizontally), along with a slightly transparent background blocking out the view of the table a little (not the rest of the webpage). How can I make a div appear over the table and do that?

Answer 1

just use jQuery’s .html() method to inject the new div with loading circle into the div holding the table. Then use css to style it. maybe give it a background image that is opaque. and relatively or absolutely position the loading circle.

say you have:

<div id="table_container>
    <table>
        <tr>
            <td>something</td>
            <td>something</td>
        </tr>
    </table>
</div>

when loading the new data use:

$('div#table_container').html('<div id="overlay"><img src="path/to/loading/img.png" class="loading_circle" alt="loading" /></div>');

and style it something like:

#overlay {
    width: 100%;
    background: url('path/to/opaque/img.png') repeat;
    position: relative;
}

#overlay img.loading_circle {
    position: absolute;
    top: 50%;  // edit these values to give you
    left: 50%; // the positioning you're looking for.
}