Display loading div animation while ajax call

Question

My DIV does not show while a ajax call is performed. I tried:

• document.getElementById("loading").style.display = "inline-block"
• $("#loading").show()
• $("#loading").css("display", "block")
• $("#loading").toggle(200)

But none of them are working.

Here's my HTML:

<div id="datatablesButtons" class="btncustom-group-body">
    <button class="btncustom pill" title="Create a new filter" tabindex="0" aria-controls="dataTables" id="addFilterButton" type="button" onclick="addFilter()">Add filter <i class="far fa-plus-square"></i></button>
    <button class="btncustom pill" title="Compute events unfiltered" tabindex="0" aria-controls="dataTables" id="buttonEventsUnfiltered" type="button" onclick="computeEventsNotImpacted()"><i class="fas fa-bolt"></i></button>
    <span class="btncustom pill" id="placeholderEventsUnfiltered" >... unfiltered event(s)</span>
    <div class="load-3" id="loading" style="display: inline-block;">
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
    </div>
</div>

CSS:

.line {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 7px;
    background-color: #4b9cdb;
}

.load-3 {margin-top: -2px; position: absolute;}
.load-3 .line:nth-last-child(1) {animation: loadingC .6s .1s linear infinite;}
.load-3 .line:nth-last-child(2) {animation: loadingC .6s .2s linear infinite;}
.load-3 .line:nth-last-child(3) {animation: loadingC .6s .3s linear infinite;}

@keyframes loadingC {
    0 {transform: translate(0,0);}
    50% {transform: translate(0,15px);}
    100% {transform: translate(0,0);}
}

JS:

$(document).ready(function() {
    document.getElementById("loading").style.display = "none";
    drawTable();
});

function computeEventsNotImpacted() {
    document.getElementById("loading").style.display = "inline-block";
    dataSelectedRows = currentTable.rows({selected: true}).data();

    $.ajax({
        url: restURI,
        type: 'POST',
        data: JSON.stringify(listEventsUnfiltered),
        cache: false,
        contentType: false,
        processData: false,
        async: false,
        success: function(eventsNotImpacted) {
            eventsUnfiltered = eventsNotImpacted[0].EVENTS_UNFILTERED;
        },
        error: function (jqXHR, exception) {
            if (globalVars.unloaded) {
                return;
            }
            manageAjaxError(jqXHR, textStatus, errorThrown);
        }
    });
    $("#placeholderEventsUnfiltered").text(eventsUnfiltered + " event(s) unfiltered");
    document.getElementById("loading").style.display = "none";
}

I see the animation if I use the Google DevTools in debug mode line by line. But it does not when I run it without debug.

Answer 1

Your Animated Loader div is not working because your ajax call is async:false ,

so async:false occupies the whole screen (and therefore blocks the browser) - that's why your div is not getting loaded , to resolved this issue:

you need to create your ajax call with async:true

like below:

 $.ajax({
        url: restURI,
        type: 'POST',
        data: JSON.stringify(listEventsUnfiltered),
        cache: false,
        contentType: false,
        processData: false,
        async: true,
        success: function(eventsNotImpacted) {
            //Success code
        },
        error: function (jqXHR, exception) {
            //Error Code
        }
    });