Develop Reference

Sweetalert2 not working after add js scroll

i'm using sweetalert and it's running without any issues, but when i add jsscroll to the data using loop, it (sweetalert) doesn't work.
The first data before scrolling can show sweetalert, but when the second data appears after scrolling and I press the button again to display (sweetalert) it doesn't work.
Please help me.
js scroll
$('ul.pagination').hide();
$(function() {
$('.infinite-scroll').jscroll({
autoTrigger: true,
loadingHtml: '<div class="sk-three-bounce"><div class="sk-child sk-bounce1"></div><div class="sk-child sk-bounce3"></div><div class="sk-child sk-bounce2"></div></div>',
nextSelector: '.pagination li.active + li a',
contentSelector: 'div.infinite-scroll',
callback: function() {
$('ul.pagination').remove();
}
});
});
sweetalert
$('.__sweet_edit').on('click', function(e) {
e.preventDefault();
const self = $(this);
const placeId = $(this).attr("data-place_id");
const placeName = $(this).attr("data-place_name");
const urlEdit = $(this).attr("data-url_edit");
const dateName = $(this).attr("data-date_name");
const urlDestroy = $(this).attr("data-url_delete");
Swal.fire({
title: placeName,
html: `<x-sweet-alerts.edit></x-sweet-alerts.edit>`,
icon: 'question',
showCancelButton: false,
showConfirmButton: false,
allowOutsideClick: false,
allowEscapeKey: false,
showCloseButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#cccccc',
confirmButtonText: 'Button',
cancelButtonText: 'Cancel'
});
});

Are you calling the script correctly...
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

Cancel function execution with SweetAlert

I have buttons to execute scripts in my Sheets Addon
<button class="button-68" role="button" onclick="morphf3994()">Unir columnas con el mismo encabezado</button>
<script>
function morphf3994() {
swaload()
google.script.run
.withSuccessHandler(swalsuccess)
.withFailureHandler(swalerror)
.merge_Columns();
}
</script>
And SweetAlert shows a Executing... alert while the script is making its function.
<script>
function swaload() {
Swal.fire({
titleText: "Ejecutando...",
text: 'Por favor, no toques ni cierres el documento.',
icon: 'warning',
allowOutsideClick: false,
preConfirm: Swal.showLoading(),
showLoaderOnConfirm: true,
showConfirmButton: false,
showCancelButton: true,
})
}
</script>
The Alert has just a Cancel button, but I don't know how to implement the CancelButton to stop the button function before finishing (in this case the .merge_Columns() function. Right now the Cancel Button just close the loading window.
Thanks!

Use then function of swal in your code. Reference
<script>
function swaload() {
Swal.fire({
titleText: "Ejecutando...",
text: 'Por favor, no toques ni cierres el documento.',
icon: 'warning',
allowOutsideClick: false,
preConfirm: Swal.showLoading(),
showLoaderOnConfirm: true,
showConfirmButton: false,
showCancelButton: true,
}).then((result) => {
if (result.isConfirmed) {
return true;
} else if (result.isDenied) {
return false;
}
})
}
</script>
apply condition in morphf3994 function
<script>
function morphf3994() {
if(swaload()){
google.script.run
.withSuccessHandler(swalsuccess)
.withFailureHandler(swalerror)
.merge_Columns();
}
}
</script>

Well, with this edit the function is running, but what i need is the code to STOP the .merge_Columns from executing. The function is already running when the Cancel button appears but I don't know the apps script code to stop the function.
<script>
function morphf9566() {
if(swaload()){
}
else {
google.script.run
.withSuccessHandler(swalsuccess2)
.withFailureHandler(swalerror)
.merge_Columns();
}
}
</script>
Thanks

How to use sweetalert / swal correctly?

I am new in Javascript / jQuery. I want to show some alert message using 'sweetalert' library and based on the user response the function will either return or continue.
Here is my implementation :
jQuery("#some_exchnage_request_form").on( 'submit', function(e){
// some implementation
// Now showing the alert
jQuery.getScript('https://unpkg.com/sweetalert/dist/sweetalert.min.js', function() {
swal({
title: "Do you want Continue ? ",
text: "You need to pay extra amount",
icon: "success",
buttons: true,
confirmButtonColor: '#C64EB2',
})
.then((willSubmit) => {
if (!willSubmit) {
return false;
}
});
});
// rest of the code
});
Here the expectation is if the user select 'cancel' button the function should return false, otherwise on selecting 'ok' button 'rest of the code' portion to be executed.
But here problem is the code doesn't stop for the user input and just continue. The alert box is displayed but it ignore the user selection.
I know implementation is wrong, but not sure what would be the correct way to do this.
Thanks!!

You need to use Swal.fire(); to make it work.
https://sweetalert2.github.io/
jQuery("#some_exchnage_request_form").on( 'submit', function(e){
// some implementation
// Now showing the alert
e.preventDefault();
jQuery.getScript('https://cdn.jsdelivr.net/npm/sweetalert2#11', function() {
Swal.fire({
title: 'Do you want Continue ?',
text: "You need to pay extra amount",
icon: 'success',
showCancelButton: true,
confirmButtonColor: '#C64EB2',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes'
}).then((result) => {
if (result.isConfirmed) {
Swal.fire(
'Confirmed!',
'You agreed to pay extra amount.',
'success'
)
} else {
console.log('clicked cancel');
}
})
})
// rest of the code
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="some_exchnage_request_form">
<input type="submit">
</form>

There are similar questions and looks like it is a limitation of 'sweetalert' that execution doesn't stop for user input unlike alert()/confirm() in js.
sweetalert pause execution and return value
How to return the value of SweetAlert2 input?

How do I show one swal at the time in javascript

I created a swal for a notification. To show up in the screen the result of the ajax function has to be 0. But this ajax function run every 2 seconds. Sometimes the ajax function returns more than one result has 0, so the swal dont stop showing, just showing the other when the user click in the close button. I would like to show one swal at the time, but setInterval function isnt alowing me to do it.
This is the funtion with the swal:
function montarModalLigacao(cdRamalLigacao = null)
{
var dsHtml = buscaDadosAjax('Ramal', 'obtemHtmlLigacao', {cdLigacaoRamal: cdRamalLigacao});
console.log(dsHtml);
if (dsHtml)
{
swal({
allowOutsideClick: false,
allowEnterKey: false,
showCloseButton: true,
showCancelButton: true,
title: 'Recebendo Chamada',
html: dsHtml,
cancelButtonText:'Fechar',
confirmButtonText: 'Lançar Ticket',
width: '80%'
}).then((result) => {
if (result.value)
pop_open('man_atendimento_ticket.php?f_id_retorno=70&f_cd_ticket=');
});
}
}
And here is where i call it, with the setInterval:
$(document).ready(function(){
setInterval(function(){
retorno = buscaDadosAjax('Ramal', 'verificarLigacao', {});
if (parseInt(retorno.id_capturado) === 0)
montarModalLigacao(retorno.cd_ramal_ligacao);
}, 2000);
}

Do not do it on an interval, call it when you are ready for the next one to happen.
function montarModalLigacao(cdRamalLigacao = null) {
var dsHtml = buscaDadosAjax('Ramal', 'obtemHtmlLigacao', {
cdLigacaoRamal: cdRamalLigacao
});
console.log(dsHtml);
if (dsHtml) {
swal({
allowOutsideClick: false,
allowEnterKey: false,
showCloseButton: true,
showCancelButton: true,
title: 'Recebendo Chamada',
html: dsHtml,
cancelButtonText: 'Fechar',
confirmButtonText: 'Lançar Ticket',
width: '80%'
}).then((result) => {
if (result.value)
pop_open('man_atendimento_ticket.php?f_id_retorno=70&f_cd_ticket=');
setUpCall();
});
} else {
setUpCall();
}
}
function setUpCall() {
setTimeout(function() {
retorno = buscaDadosAjax('Ramal', 'verificarLigacao', {});
if (parseInt(retorno.id_capturado) === 0)
montarModalLigacao(retorno.cd_ramal_ligacao);
}, 2000);
}
$(document).ready(setUpCall);

Fire sweetalert toast from a sweetalert without closing it

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 ;)