[英]Display loading div animation while ajax call
My DIV does not show while a ajax call is performed.执行 ajax 调用时,我的 DIV 不显示。 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:这是我的 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: 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: 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.如果我在调试模式下逐行使用 Google DevTools,我会看到 animation。 But it does not when I run it without debug.但是当我在没有调试的情况下运行它时它不会。
Your Animated Loader div is not working because your ajax call is async:false
,您的 Animated Loader div 不起作用,因为您的 ajax 调用是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:所以async:false
占据了整个屏幕(因此阻止了浏览器)——这就是为什么你的 div 没有被加载,来解决这个问题:
you need to create your ajax call with async:true
您需要使用async:true
创建您的 ajax 调用
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
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.