Hello everyone I'm working on creating conditional statements for my bootstrap modal but I notice that else if condition doesn't work and I don't know why.
<!--Awaiting Verification Modal -->
<div class="modal fade" id="awaitModal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body p-5" align="center">
<h3>Awaiting Profile Verification and Confirmation.</h3>
<h5>Check your email for more details</h5>
</div>
</div>
</div>
</div>
<!--Verify Modal -->
<div class="modal fade" id="verifyModal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" aria-labelledby="verifyModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body p-5" align="center">
<h3>Your withdrawal Verification has been confirmed.</h3>
<button class="btn btn-success">Proceed</button>
</div>
</div>
</div>
</div>
<script>
$(window).on('load', function() {
if({{awaitingapproval() == 1}}) {
$('#awaitModal').modal('show');
}
else if({{awaitingapproval() == 2}}) {
$('#verifyModal').modal('show');
}
else {
$('#awaitModal').modal('hide');
$('#verifyModal').modal('hide');
}
});
</script>
When I comment out else if the if condition modal shows but when the else if is there it doesn't show in fact no modal shows. Please someone help me out.
Your if statement was incorrect. I changed the code a bit and it works fine now! You can try it out. I generate a random number between 1 and 4 and put that in the variable awaitingapproval as you can see below, if its 1 or 2 the correct modal will show. Just hit run code snippet to get 1 or 2 or you can change the value.
$(window).on('load', function() {
const awaitingapproval = Math.floor(Math.random() * (4 - 1 + 1) + 1)
const awaitingapprovalNumber = document.querySelector('#awaitingapprovalNumber')
awaitingapprovalNumber.innerHTML = awaitingapproval
if (awaitingapproval === 1) {
$('#awaitModal').modal('show');
return; // Show await modal and then stop the code
}
if (awaitingapproval === 2) {
$('#verifyModal').modal('show');
return; // Show verify modal and then stop the code
}
// If awaitingapproval is not 1 or 2 then hide all modals
$('#awaitModal').modal('hide');
$('#verifyModal').modal('hide');
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<p id="awaitingapprovalNumber"></p>
<div class="modal fade" id="awaitModal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body p-5" align="center">
<h3>Awaiting Profile Verification and Confirmation.</h3>
<h5>Check your email for more details</h5>
</div>
</div>
</div>
</div>
<!--Verify Modal -->
<div class="modal fade" id="verifyModal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" aria-labelledby="verifyModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body p-5" align="center">
<h3>Your withdrawal Verification has been confirmed.</h3>
<button class="btn btn-success">Proceed</button>
</div>
</div>
</div>
</div>