SweetAlert2 examples do not work with IE11.
The following code won't run with IE11:
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.value) {
swal(
'Deleted!',
'Your file has been deleted.',
'success'
)
}
})
SweetAlert2 examples use Arrow functions and other ES6 goodies that IE11 cannot handle.
The simple way to overcome this problem is to use function() syntax instead () =>
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then(function(result) {
if (result.value) {
swal(
'Deleted!',
'Your file has been deleted.',
'success'
)
}
})
Related
SweetAlert icon not working properly
Here my code:
function test(processID){
swal.fire({
title: 'alert?',
text: "Click Proceed!",
icon: '',
customClass: 'swal-wide',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'test!'
}).then((result) => {
if (result.isConfirmed) {
window.location = "<?=base_url('test/test1/')?>"+processID;
}
});
}
I have a Yes and No button in my SweetAlert2. When I click on No it does a post to a method but I just want it to close the SweetAlert.
Here is the code I have written:
$('.js-update-details-click').click(function () {
var Id = Number($(this).data('result-id'));
swal({
title: 'Are you sure you want to ask the User to update their details?',
type: 'warning',
showCancelButton: true,
closeOnConfirm: false,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes',
cancelButtonText: 'No',
confirmButtonClass: 'btn btn-success btn-full-width mar-bot-5',
cancelButtonClass: 'btn btn-danger btn-full-width mar-bot-5',
buttonsStyling: false
})
.then(function (isconfirm) {
if (isconfirm) {
$.ajax({
type: "POST",
url: '/Common/ComposeUpdateDetailsEmail',
data: { ReplyType: 'CleanUpdateDetails', Id: Id },
success: function (data) {
swal('User has been sent an email to Update their Details.')
}
});
}
});
}
);
Most probably you updated the sweetalert2 dependency to ^7.0.0 and didn't read the release notes with breaking changes: https://github.com/sweetalert2/sweetalert2/releases/tag/v7.0.0
Starting from v7.0.0, SweetAlert2 will fulfill the promise for both confirm and cancel buttons and you need to handle the response from it this way:
Swal.fire({
...
}).then(function (result) {
if (result.value) {
// handle confirm
} else {
// handle cancel
}
})
Reference:
https://jsfiddle.net/ad3quksn/199/
`
swal({
title: 'Input something',
type: 'question',
input: 'text',
showCancelButton: true
}).then(
result => {
if (result.value) {
swal({
type: 'success',
html: 'You entered: <strong>' + result.value + '</strong>'
})
} else {
console.log(`dialog was dismissed by ${result.dismiss}`)
}
}
);
`
It shows with an output example of how to handle the promise as of v7.0.0: it helped me understand better!
Maybe help you :
swal("you liked it",{ buttons:{cancel:false,confirm:false}, timer:1000, })
ref : https://github.com/t4t5/sweetalert/issues/763
I need create a generic function similar the confirm function in jquery using sweet alert 2.
var eval = ConfirmModalDelete("mensaje text");
alert(eval);
The problem is when call the function "ConfirmModalDelete" jquery not wait for result of "swal".
function ConfirmModalDelete(mensaje) {
var retorno = false;
swal({
title: 'Are you sure?',
text: mensaje,
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then(function (result) {
if (result.value) {
retorno = true;
}
});
return retorno;
}
And the result is always "false".
Help please.
-------------------------------------Edit 09-07-2018------------------------
Eureka!
The solution is it:
var fun = function()
{
alert("hello");
}
MensajeConfirm(fun);
Then:
function MensajeConfirm(func)
{
swal({
title: "title",
text: "message",
type: "warning",
showCancelButton: true,
confirmButtonText: "Confirm",
cancelButtonText: "Cancel",
showLoaderOnConfirm: true,
allowOutsideClick: false,
focusCancel: true
}).then(function (eval) {
if (eval.value) {
//case press confirm
func();
//
}
if (eval.dismiss) {
///eval case esc|cancel
}
});
}
Create a callback function and pass it in your function.
function handleOkClick(){
// do your stuff
}
function ConfirmModalDelete(mensaje, handleOkClick) {
swal({
title: 'Are you sure?',
text: mensaje,
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then(function (result) {
if (result.value) {
handleOkClick();
}
});
Please use '.done' function:-
$("button").click(function() {
swal({
title: 'Are you sure?',
text: 'mensaje',
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
} ).then(function (hello) {
alert('dfasdfsd');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert2#7.12.10/dist/sweetalert2.all.js"></script>
<button type="button">Click Me!</button>
Make sure you're using the latest version of SweetAlert2. Your code example works fine:
console.log(swal.version)
swal({
title: 'Are you sure?',
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then(function (result) {
console.log(result)
});
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#7"></script>
PS. notice that SweetAlert2 is a little bit different from SweetAlert, check the simple migration guide: https://github.com/sweetalert2/sweetalert2/wiki/Migration-from-SweetAlert-to-SweetAlert2
I have the following swal code and it works fine if the returned status for the HTTP call is '200'. But if I get a '403' unauthorized error the swal loader keeps spinning and the message never goes away, like shown below. I'm not sure if I'm not handling the error correctly.
Can you help?
let that = this;
swal({
title: 'Are you sure?',
text: 'You won\'t be able to revert this!',
type: 'warning',
showCancelButton: true,
confirmButtonText: 'Yes, delete it!',
confirmButtonColor: '#d33',
cancelButtonText: 'No, keep it',
showLoaderOnConfirm: true,
preConfirm: function (email) {
return new Promise(function (resolve, reject) {
that.http.get(url, {"headers": headers})
.map(res => res)
.subscribe(data => {
console.log(data);
if (data.status === 200) {
resolve();
} else {
reject(data.status);
}
})
})
},
allowOutsideClick: false
}).then(function() {
swal(
'Deleted!',
'The user has been deleted.',
'success'
)
}, function(dismiss) {
if (dismiss === 'cancel') {
swal(
'Cancelled',
'Nothing has been deleted!',
'error'
)
}
}).catch((error) => {
console.log('error_does_not_reach_here', error);
})
This is a example of my code:
swal({
title: "Confirm",
text: "¿Are you sure?",
type: "warning",
showCancelButton: true,
confirmButtonText: 'Aceptar',
cancelButtonText: 'Cancelar'
}).then(function () {
//If Press ok, send the data
var arr = {
cuil: empDP.fd.Cuil,
cct: empDP.fd.Cct,
activity: empDP.fd.Activity,
};
Vue.http.post(empDP.globalurl + "/persondata/save", arr).then(function (response) {
swal('Data saved correctly', '', 'success');
empDP.clean();
}, function (response) {
//If Response return error
swal('Show a Text Error', '', 'error');
});
In sweet alert 2, How on load to set value in input
my sweet alert code
swal({
title: 'Are you sure?',
text: "You are going to send emails from the system. Please confirm",
showCancelButton: true,
input: 'email',
confirmButtonText: 'Submit',
confirmButtonColor: '#4aa0f1',
cancelButtonColor: '#898b8e',
confirmButtonText: 'Send'
}).then(function (email) {
send_email = email;
sentHtmtBody_send();
loadingIcon();
});
We can add another field
inputValue : 'test value',
after adding it full code we can see it like this
swal({
title: 'Are you sure?',
text: "You are going to send emails from the system. Please confirm",
showCancelButton: true,
input: 'email',
inputValue: "E.g john",
confirmButtonText: 'Submit',
confirmButtonColor: '#4aa0f1',
cancelButtonColor: '#898b8e',
confirmButtonText: 'Send'
}).then(function (email) {
send_email = email;
sentHtmtBody_send();
loadingIcon();
});
On sweetalert2 I implement it in this suggested way:
let input = document.createElement("input");
input.value = 'test';
input.type = 'text';
input.className = 'swal-content__input';
swal('Please type:', {
content: input,
buttons: ['Cancel', 'Update']
})
.then(() => {
//
});