I am having trouble displaying a loader animation div when a checkbox is clicked. I have tried various solutions mentioned in other posts, but none of them seem to work for me.
$('#checker').click(function() {
const picture = "..."
// picture = webcam.snap();
// alert(picture);
$('#lds-ring').show();
$.post('TestCamera', {
param: picture
}, function(response) {
if (response === 'error') {
alert('An error has been detected, please review the instructions carefully');
} else {
window.location.replace('QuestionAndAnalyze.jsp'); /* redirect*/
}
}); /*END servletCall*/
}); /*END click*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="column load">
<div class="lds-ring" style="display:none;">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<input type="checkbox" name="checkVision" id="checker">
<label for="checkVision">I read all</label>
I have searched through older posts for a solution and even tried using the "show()" method, but it did not work for me.
I also attempted the following:
<div class="lds-ring" style="visibility:hidden;"> </div>
$('#lds-ring').css('visibility','visible')