Level 2
??
Apr 11, 2020
5
Level 2
SweetAlert2 Confirmation before Modal Closed (Bootstrap4)
Hello My friend how are you ?
I have a simple questions about how to Change the Default Confirm Dialog message to SweetAlert2 Confirmation Dialog. I tried multiple time with a lot of tricks but nothing works as I want...
I made this simple code but the problem in my own JS code is when I click the ConfirmButton in Sweetalert2 dialog nothing happen normally it should be close the modal.
See it in Live preview : codepen
HTML CODE :
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<input type="file"
id="ID12"
name="avatar"
value="" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
JS CODE :
$(document).on('hide.bs.modal', '#exampleModal', function (e) {
if ($('#ID12').val() != '') {
const CancelUploadConfirmation = false;
if (!CancelUploadConfirmation) {
e.preventDefault();
const swalWithBootstrapButtons = Swal.mixin({
customClass: {
confirmButton: 'btn btn-danger mr-2',
cancelButton: 'btn btn-success'
},
buttonsStyling: false
})
swalWithBootstrapButtons.fire({
title: 'Are you sure? 🤔',
text: "Do you really want to Cancel the Personal Picture Upload?",
icon: 'question',
showCancelButton: true,
confirmButtonText: 'Yes, I am! 🥺',
cancelButtonText: "No, I'm Not 😊",
showClass: {
popup: 'animated fadeInDown faster'
},
hideClass: {
popup: 'animated fadeOutUp faster'
}
}).then((CancelConfirmationResult) => {
if (CancelConfirmationResult.value) {
CancelUploadConfirmation = true;
} else if (CancelConfirmationResult.dismiss === Swal.DismissReason.cancel)
{
swalWithBootstrapButtons.fire({
title: 'Fantastic 🤗',
text: "We are happy 🎉 that you still want to Upload your Own Personal picture!",
icon: 'success',
showConfirmButton: false,
timer: 1800,
showClass: {
popup: 'animated fadeInDown faster'
},
hideClass: {
popup: 'animated fadeOutUp faster'
}
})
}
});
}
}
});
Level 3
Which is your actual code? The one here or on codepen? They are not the same.
Level 2
both my fried you can use this code her on laracasts
Level 3
... OK. First of all, after reading a couple of questions you asked here, I highly recommend you to do a beginners guide. Reading this article: https://www.w3schools.com/js/js_const.asp might be a great start.
If we come back to your problem, this is what is going to solve it:
$('#ID12').val(""); $(this).modal("hide");
Change
if (CancelConfirmationResult.value) {
CancelUploadConfirmation = true;
}
to
if (CancelConfirmationResult.value) {
$('#ID12').val(""); $(this).modal("hide");
}
This CancelUploadConfirmation = true; doesn't make any sense, you can read the reason why on the site I linked.
Edit: I would write the code in a different way. Check this out: https://getbootstrap.com/docs/4.4/components/modal/#methods
Aaaand this doesn't make sense too:
const CancelUploadConfirmation = false;
if (!CancelUploadConfirmation) {
First you define a const, initialize it as false and check afterwards if it's false without an else case. So... It's useless. The reason why your modal didn't close was this if:
if ($('#ID12').val() != '')
Level 2
The Original Code is this :
$(document).on('hide.bs.modal', '#exampleModal', function (e) {
if ($('#ID12').val() != '') {
const CancelUploadConfirmation = confirm('Are you sure! 🤔 you want to Close the modal and Cancel your Upload? 🙄');
if (!CancelUploadConfirmation) {
e.preventDefault();
} else {
}
}
});
I want to check if the User Upload a file or not if yes show him a confirm message if not close the modal without any message that is
that's why i change the default confirm message to sweetalert2 but not work well maybe I need to change something
Please or to participate in this conversation.