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
Related
I am creating a component with a button show a popup using vue-sweetalert2.
In the popup, there are have 2 buttons that I want to display multiple language
(I am using i18n for multiple language for every word in template tag but the popup texts are in script->export default->method)
methods:{
openAlert(){
this.$swal({
title: 'Confirm Popup',
text: "File name is duplicate \n What do you want?", //<--here i want multiple language
showCancelButton: true,
cancelButtonText: 'Replace file', //<-- here
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Cancel upload' // <--- here
})
},
}
Please help me! I'm new in JS
You can try setting a select in alert as shown below.
this.$swal({
title: 'Confirm Popup',',
input: 'select',
inputOptions: {
'1': 'Value 1',
'2': 'Value 2',
'3': 'Value 3'
},
inputPlaceholder: 'required',
showCancelButton: true,
inputValidator: function (value) {
return new Promise(function (resolve, reject) {
if (value !== '') {
resolve();
} else {
reject('You need to select a Value');
}
});
}
}).then(function (result) {
if (result.value) {
this.$swal({
type: 'success',
html: 'You selected: ' + result.value
});
}
});
You can also refer to the example in official documentation.
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 can set inputType as password. What are the other input Types supported..?
swal({
title: "Are you sure?",
type: "input",
inputType: "checkbox",
showCancelButton: true,
closeOnConfirm: true,
}, function () {
swal("", "You did it", "success");
});
the checkbox inputType is not supported in swal..
There's a nice way to use checkbox modal type in SweetAlert2:
Swal.fire({
title: 'Do you have a bike?',
input: 'checkbox',
inputPlaceholder: 'I have a bike'
}).then((result) => {
if (result.isConfirmed) {
if (result.value) {
Swal.fire({icon: 'success', text: 'You have a bike!'});
} else {
Swal.fire({icon: 'error', text: "You don't have a bike :("});
}
} else {
console.log(`modal was dismissed by ${result.dismiss}`)
}
})
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#11"></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');
});
I would like to use the sweetalert2 this way:
$('.preloaderContent').click(function(e) {
e.preventDefault();
swal({
title: "Data collecting....",
text: "Please Wait!",
type: "info",
showLoaderOnConfirm: true,
preConfirm: function() {
return new Promise(function(resolve) {
$.ajax({
type: "get",
url: '/reports/test',
success: function(response){
$('.page-content').html(response);
}
})
});
}
});
});
How can I use 'swal.clickConfirm()' to start the loading without the need of letting the user hit the 'OK' Button?
And how can I close the swal window after all content is loaded?
Thanks so much!
!!! UPDATE:
This way it is working for me:
$('.preloadData').click(function(e) {
e.preventDefault();
swal({
title: "Collecting data....",
text: "Please wait just one moment",
type: "info",
showLoaderOnConfirm: true,
onOpen: function(){
swal.clickConfirm();
},
preConfirm: function() {
return new Promise(function(resolve) {
$.ajax({
type: "get",
url: '/x/xx/',
success: function(response){
$('.page-content').html(response);
swal.closeModal();
}
})
});
},allowOutsideClick: false
});
});