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 ;)
Related
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>
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?
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);
I am using SweetAlert2 to communicate some feedback to the user. This is a learning app, so, I want the feedback to persist for some time. I do not want to show any buttons immediately after the feedback is displayed because people have a tendency to just click on 'OK' or 'Cancel', without reading the text.
The number of characters in the feedback varies from screen to screen, so, I am using the timer parameter of sweetalert2 to be some multiple of the number of characters in the text. But, the timer feature is imperfect because people have different reading speeds. Ideally, I would want the 'OK' button to appear after the timer has timed out. Is there some sort of an API call I can make to dynamically change the property of the alert box?
swal({
html: feedback,
timer: feedback.length*50,
showCloseButton: false,
showCancelButton: false,
showConfirmButton: false,
allowOutsideClick: false,
});
I don't see any method to hide and show the buttons, but you can disable and enable them:
swal({
html: 'test',
allowOutsideClick: false,
allowEscapeKey: false,
onOpen: function () {
swal.disableButtons();
setTimeout(swal.enableButtons, 'test'.length * 500)
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.9/sweetalert2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.9/sweetalert2.min.css">
or make them transparent:
swal({
html: 'test',
allowOutsideClick: false,
allowEscapeKey: false,
onOpen: function () {
var b = swal.getConfirmButton()
b.style.opacity = 0
b.disabled = true
setTimeout(function() {
b.disabled = false
b.style.opacity = 1
}, 'test'.length * 500)
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.9/sweetalert2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.9/sweetalert2.min.css">
or hide and show:
swal({
html: 'test',
allowOutsideClick: false,
allowEscapeKey: false,
onOpen: function () {
var b = swal.getConfirmButton()
b.hidden = true
b.disabled = true
setTimeout(function() {
b.disabled = false
b.hidden = false
}, 'test'.length * 500)
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.9/sweetalert2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.9/sweetalert2.min.css">
Hi to achive this you can use a set timeout function and call jQuery's .show() function on the buttons that you wish to show (Assuming you are ok with using jQuery).
The following code should help you out
swal({
html: feedback,
timer: feedback.length*50,
showCloseButton: false,
showCancelButton: false,
showConfirmButton: false,
allowOutsideClick: false,
});
setTimeout(function () {
$(".swal2-cancel").show();
$(".swal2-confirm").show();
$(".swal2-close").show();
}, 3000);
Hope this helps :-)
When I add a product to the cart I am using the code below:
addproduct(itemId) {
this.showLoading = true
this.$http.post('/shampoo', {'item': itemId}).then((response) => {
swal({
title: "Success!",
text: "Product added to your basket!",
type: "success",
timer: 1500,
showConfirmButton: false
})
this.showLoading = false
}, (response) => {
this.showLoading = false
})
I created a popup form which for no product was at the cart, once they click on the add to cart button it popups, once the product was their at the cart, if any one need to add another product it again showing popup. I don't want the popup if product was at the cart
here is the code for popup form
show() {
this.showLoading = true;
$(".loading").css('display', 'block');
$('#products').modal("hide");
//
let code = $('input[name=code]').val();
if(code) {
this.$http.post('/codee', { code: code}).then((response) => {
// $('#basic-form').submit();
}, (response) => {
swal({
title: "Error!",
text: "Sorry this Code is invalid!",
type: "error",
timer: 2500,
showConfirmButton: false
})
$(".loading").css('display', 'none');
this.showLoading = false
$('input[name=code]').val('')
})
When you click add to cart, at the server side, you need to check if the item id is in the cart and return a flag to either indicate the item is in the cat or not. I assume this code is responsible for the pop up.
swal({
title: "Error!",
text: "Sorry this Code is invalid!",
type: "error",
timer: 2500,
showConfirmButton: false
})
You need to check for the returned value from the server, if it returns a flag indicating that the item already exist, just return false; that will block the pop up code from being reached. or you could wrap the pop code in an if statement. e.g
if(response.flag === 1){
return false;
// your pop up code goes here
}
or
if(response.flag === 0){
// your pop up code goes here
}
// flag can assume 0 => Added but does not exist, 1=> added but already
// exist. ect
// while the actual data will be stored in response.data
But I am wondering of the reason you are implementing this. If a user clicks add to cart, you are supposed to increment the number of that same item if already exist in the cart