8
rated 0 times
[
13]
[
5]
/ answers: 1 / hits: 17905
/ 3 Years ago, tue, march 9, 2021, 12:00:00
Using bootstrap 5
I have a modal which I show when #truck_modal is clicked which works just fine like so:
(this code is at the top of my js file)
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('#add_truck').addEventListener('click', AddTruck);
const truck_modal = document.querySelector('#staticBackdrop');
const modal = new bootstrap.Modal(truck_modal, {
backdrop: 'static'
});
document.querySelector('#truck_modal').addEventListener('click', () => {
modal.show();
});
})
Now, if I add the following to the above function it works.
document.querySelector('#add_truck').addEventListener('click', () => {
modal.hide();
});
But here it runs when #add_truck is clicked regardless if the AddTruck function was successful or not, I only want it to hide if the AddTruck function is successful, so I tried the following.
function AddTruck() {
... some validations ...
fetch('/inbound/add_truck', {
... some fetch code ...
})
.then(response => {
jsonResponse = response.json();
status_code = response.status;
// console.log(jsonResponse);
// console.log(status_code);
if(status_code != 200) {
alert('There was an error!');
} else{
origin.value = '';
produce.value = '';
license_num.value = '';
loaded_weight.value = '';
// document.querySelector('#add_truck').addEventListener('click', () => {
// modal.hide();
// });
modal.hide();
// hideFunc();
alert('Success!!!')
}
return status_code
})
.catch(error => {
console.log(error)
})
}
Even tried this:
function hideFunc() {
const truck_modal = document.querySelector('#staticBackdrop');
const modal = new bootstrap.Modal(truck_modal, {
backdrop: 'static'
});
modal.hide();
}
What am I doing wrong here? Please help...
Or is this a feature?
EDIT
These are my js, bootstrap and jquery scripts
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="{% static 'utils.js' %}"></script>
And I added $('#truck_modal').modal('hide'); to the else block where I'm trying to hide it.
More From » bootstrap-modal
