I have a JavaScript function that is activated by clicking a button. Before entering an 'each' loop, I add a class to an element.
When I run the code on the page, I don't see any changes. However, when I pause the code in the debugger, the changes become visible.
The code structure looks like this:
$("#btnApplyDefaults").on('click',
function (e) {
$('#loader').addClass("loading-page");
$('#pricingSheetItems tr').filter(':has(:checkbox:checked)').each(function() {
// Do something
});
$('#loader').removeClass("loading-page");
});
If I execute this with data that takes a long time to process, the loading image never appears. But if I set a breakpoint and step through the code, then I can see the image.
This is the CSS class being used:
div.loading-page {
position: absolute;
left: 50%;
background-image: url("../../dist/img/loading.gif");
background-repeat: no-repeat;
content: "";
display: block;
width: 32px;
height: 32px;
}
The class is assigned to this div:
<div tabindex="-1" class="" id="loader"></div>