I've got a kind of projects management system, and I use a sweetalert popup as a settings menu for each project, and I want to fire a toast when a setting is changed, but that causes the menu to close. Is there a way to make this work without using another library just for toasts?
Here's the code I'm trying to run for the sweetalert menu
var id = 65352;
Swal.fire({
title: 'settings for project '+id,
html:
"<p>some setting</p>"+
"<input class='toggle' id='setting' data-docid='"+id+"' type='checkbox' checked>",
showCancelButton: true,
showConfirmButton: false,
cancelButtonText: 'close',
onBeforeOpen: () => {
const setting = $("#setting[data-docid="+id+"]");
$(setting).on("change",function(){
console.log($(this).attr("checked"));
if($(this).attr("checked") == "checked"){
$checked = 1;
}else{
$checked = 0;
}
$.parameters = {
id: id,
checked: $checked,
type: "accept"
}
//using an api to communicate between client and server
result = "TRUE"
if(result.indexOf("TRUE") > -1){
const Toast = Swal.mixin({ //when firing the toast, the first window closes automatically
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000
});
Toast.fire({
type: 'success',
title: 'changed the thingy successfully'
})
}else{
const Toast = Swal.mixin({ //when firing the toast, the first window closes automatically
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000
});
Toast.fire({
type: 'error',
title: 'cant change the thingy'
})
}
});
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8.11.5/dist/sweetalert2.all.min.js"></script>
Unfortunately, reading this thread it seems that it's not possible because a toast IS an modal in a way ...
But the last comment pointed out it could be possible modifying the code of Swal2 ;)