javascript async sweetAlert - javascript

So i have to try to create an async function that waits for a user input before returning, however, I am not quite sure how to do it:
async createAlert() {
return await swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonText: 'Yes, delete it!',
cancelButtonText: 'No, cancel!',
reverseButtons: true
}).then(function (result) {
//user has answered we want to return the result
})
}
this jquery creates the following popup:
When the user presses either button the (then) part of the code is executed and here i want to return that result
Can anyone point me in the right direction?

Try it like that:
async createAlert() {
try{
let result = await swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonText: 'Yes, delete it!',
cancelButtonText: 'No, cancel!',
reverseButtons: true
});
// SUCCESS
return result;
}catch(e){
// Fail!
console.error(e);
}
}

Related

Delete confirmation with Sweetalert2 in Vue js

I'm trying to make a sweetalert when the user clicks the delete button it will trigger a sweetalert and when the user clicks Yes, Delete it! it should make an axois request to delete the status. When the user clicks on Yes, Delete it! the sweetalert closes but the request is never made. If I remove the sweetalert and just leave the request it will delete the record.
Delete button
<button #click="destroy(statuses.id)" class="btn btn-danger btn-flat btn-sm"> <i class="fa fa-remove"></i> </button>
Delete method
methods: {
destroy(id) {
swal({
title: "Delete this order status?",
text: "Are you sure? You won't be able to revert this!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
confirmButtonText: "Yes, Delete it!",
}, () => {
del('status-delete/' + id)
})
}
}
Based from the documentation, you can do this.
swal({
title: "Delete this order status?",
text: "Are you sure? You won't be able to revert this!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
confirmButtonText: "Yes, Delete it!"
}).then((result) => { // <--
if (result.value) { // <-- if confirmed
del('status-delete/' + id);
}
});
Reference: https://sweetalert2.github.io/
Try this:
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!',
cancelButtonText: 'No, cancel!',
buttonsStyling: true
}).then(function (isConfirm) {
if(isConfirm.value === true) {
axios.post('status-delete/'+id, {
data: {
id: id
}
}).then(function (response) {
console.log('success')
})
}
});

Pause and wait for boolean response from other function

I would like to be able to have 2 functions, run 1 of them, then inside it, run another and wait for its response before continuing in an if statement. The response is manual, (yes/no).
Basically something like this
function function1(){
if(function2("Delete", "are you sure", "warning") == true){ //stop here and wait for function2 to return true or false
console.log("yes");
} else {
console.log("no");
}
}
function function2($title, $text, $type){
swal({
title: $title,
text: $text,
type: $type,
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes',
cancelButtonText: 'No, cancel!',
confirmButtonClass: 'btn btn-success',
cancelButtonClass: 'btn btn-danger',
buttonsStyling: false,
reverseButtons: true
}).then((result) => {
if (result.value) {
return true;
} else if (
// Read more about handling dismissals
result.dismiss === swal.DismissReason.cancel
) {
return false;
}
})
}
What is the cleanest and easiest way to achieve this, in Javascript or JQuery? It can't be instant, as I need the first function to pause and wait for the user response before continuing the function.
This might be what you looking for, not sure.
function1 is waiting the promise to be resolve to console.log.
function function1(){
function2().then(res => console.log(res ? "yes" : "no"));
}
function function2($id){
return new Promise(resolve => resolve);
}
Answer resolved through comments of the original post.
function function2($title, $text, $type){
return swal({
title: $title,
text: $text,
type: $type,
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes',
cancelButtonText: 'No, cancel!',
confirmButtonClass: 'btn btn-success',
cancelButtonClass: 'btn btn-danger',
buttonsStyling: false,
reverseButtons: true
}).then((result) => {
if (result.value) {
return true;
} else if (
// Read more about handling dismissals
result.dismiss === swal.DismissReason.cancel
) {
return false;
}
})
}
function function1(){
function2("Discard", "are you sure?", "warning").then(function(response){
if(response == true){
} else {
}
});
}

Delete confirmation with Sweet alert in Vue js

I have a comment delete button in vue components.
<button class="button" style="background-color: grey;" #click="destroy">Delete</button>
When the button clicked will call the method "destroy"
destroy(){
swal({
title: "Delete this comment?",
text: "Are you sure? You won't be able to revert this!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
confirmButtonText: "Yes, Delete it!",
closeOnConfirm: true
},
function(){
axios.delete('/comment/' + this.comment.id + '/delete');
$(this.$el).fadeOut(300, () => {
return toastr.success('Comment deleted.');
});
});
},
i expect when alert come out, if users clicked confirm button then process to delete, but seem like when user clicked the delete function are not executed. What is the problems here?
The this context inside SWAL's callback function is the SWAL instance and not the Vue instance! This means that this.comment.id and this.$el are probably undefined and, thus, the function don't execute and would result in a TypeError.
To resolve this,
Use Arrow Functions
swal({
title: "Delete this comment?",
text: "Are you sure? You won't be able to revert this!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
confirmButtonText: "Yes, Delete it!",
closeOnConfirm: true
}, () => {
axios.delete('/comment/' + this.comment.id + '/delete');
$(this.$el).fadeOut(300, () => toastr.success('Comment deleted.'));
})
Capture this
let inst = this;
swal({
title: "Delete this comment?",
text: "Are you sure? You won't be able to revert this!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
confirmButtonText: "Yes, Delete it!",
closeOnConfirm: true
}, function onDelete(){
axios.delete('/comment/' + inst.comment.id + '/delete');
$(inst.$el).fadeOut(300, () => toastr.success('Comment deleted.'));
})
This is not only a this context error.
SweetAlert is promise-based, so you need to call your axios request, in a Promise.prototype.then() method.
swal({
title: "Delete this comment?",
text: "Are you sure? You won't be able to revert this!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
confirmButtonText: "Yes, Delete it!",
closeOnConfirm: true
})
.then( () => {
axios.delete('/comment/' + this.comment.id + '/delete');
$(this.$el).fadeOut(300, () => toastr.success('Comment deleted.'));
})

How to use confirm (then submit) using sweet alert2?

I have a button where when user press, it shows yes or cancel if yes is pressed it redirects user to a url here is the code i am using
if (result.error == 2)
{
if (confirm(result.message))
{
location.href = '/user.php?act=add_booking&id=' + result.goods_id + '&spec=' + result.product_spec; //
}
}
Now i have installed Sweet alert 2 and i want to use it to confirm or cancel
I have used this code and its working fine now
if (result.error == 2)
{
swal({
title: 'Are you sure?',
text: "Do you want to go to the Log In page?",
type: 'success',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, send me there!'
}, function(){
window.location.href = '/user.php?act=add_booking&id=' + result.goods_id + '&spec=' + result.product_spec;
});
}
From your question i think now you have added Sweet Alert 2 Plugin.you want to change code for that
swal({
title: 'Are you sure?',
text: "You will be redirected!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes'
},function(isConfirm){
if (isConfirm) {
window.location.href = "http://stackoverflow.com";
}
});

How to run a SweetAlert instead of default javascript confirm method

Currently this is the code I use to run a normal confirm window based on the class "confirmation". This is all done with an href link and not on a button onClick event. As the result of the click is to run another code snipped placed in a different file (with the intention to delete a row in db).
$('.confirmation').on('click', function () {
return confirm('Er du sikker på at du vil slette?');
});
What I want is to replace the confirm method with this SweetAlert function
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
}, function(){
swal("Deleted!", "Your imaginary file has been deleted.", "success");
});
Anyone know how to do this, what happens when I try to place the sweetalert inside the onClick function is that the alert appears but it automatically delete the row without me having to confirm anything and the alert fades out.
I found the solution!
$('.confirmation').click(function(e) {
e.preventDefault(); // Prevent the href from redirecting directly
var linkURL = $(this).attr("href");
warnBeforeRedirect(linkURL);
});
function warnBeforeRedirect(linkURL) {
swal({
title: "Leave this site?",
text: "If you click 'OK', you will be redirected to " + linkURL,
type: "warning",
showCancelButton: true
}, function() {
// Redirect the user
window.location.href = linkURL;
});
}
I made this codepen in case anyone wants to debug. It appears this is working (check the browser console log for when 'done' is printed)
http://codepen.io/connorjsmith/pen/YXvJoE
$('.confirmation').on('click', function(){
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm){
if (isConfirm) {
console.log('done');
swal("Deleted!", "Your imaginary file has been deleted.", "success");
} else {
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
});
})
Add event.preventDefault(); preventDefault();
$('.confirmation').on('click', function (event) {
event.preventDefault();
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
}, function(){
swal("Deleted!", "Your imaginary file has been deleted.", "success");
});
});
Try this code which is mentioned as in docs:
$('.confirmation').on('click', function () {
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
}, function(isConfirm){
return isConfirm; //Will be either true or false
});
});
I wrote this function:
function sweetConfirm(title, text) {
event.preventDefault();
var target = $(event.target);
var href = null;
var form = null;
if (target.is("a")) href = target.attr("href");
else if (target.is("button:submit")) form = target.closest("form");
else if (target.is("button")) href = target.attr("href") || target.attr("value");
swal({
title: title,
text: text,
type: "warning",
allowOutsideClick: true,
showCancelButton: true
}, function () {
if (href) window.location.href = href;
else if (form) form.submit();
});
}
sweetConfirm function will accept a submit button, link button or a normal button and will ask before do the action.
You can use it in the following scenarios:
<a type="button" class="btn btn-default" href="/" onclick="return sweetConfirm('Are you sure?')">
Link Button 1
</a>
<button type="button" class="btn btn-default" href="/" onclick="return sweetConfirm('Are you sure?')">
Link Button 2
</button>
<form action="/" method="DELETE">
<input type="hidden" name="id" value="..">
<button type="submit" class="btn btn-danger" onclick="return sweetConfirm('Are you sure?')">
Delete
</button>
</form>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/sweetalert2#7.32.4/dist/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#7.32.4/dist/sweetalert2.all.min.js"></script>
</head>
<body>
<a id="confirmation" href="test">Test</a>
<script type="text/javascript">
$('#confirmation').click(function(e) {
e.preventDefault(); // Prevent the href from redirecting directly
var linkURL = $(this).attr("href");
console.log(linkURL)
warnBeforeRedirect(linkURL);
});
function warnBeforeRedirect(linkURL) {
Swal({
title: 'sAre 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) {
window.location.href = linkURL;
}
})
}
</script>
</body>
</html>

Categories