We Keep Coding

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

Laravel 5.2 - Sweet Alert confirmation box

I have Categories listed in a view. A delete category button is also there in the view which does work and deletes the category when clicked.
What I want to do is before deleting a category, a sweet alert dialog to pop up and ask for confirmation. If confirmed, it should go to the defined route and delete the category.
The delete link is defined like this:
<a id="delete-btn" href="{{ route('admin.categories.destroy', $category->id) }}" class="btn btn-danger">Delete</a>
and the script is defined like this:
<script>
$(document).on('click', '#delete-btn', function(e) {
e.preventDefault();
var link = $(this);
swal({
title: "Confirm Delete",
text: "Are you sure to delete this category?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: true
},
function(isConfirm){
if(isConfirm){
window.location = link.attr('href');
}
else{
swal("cancelled","Category deletion Cancelled", "error");
}
});
});
</script>
However, when I click the delete button it deletes the category, but the sweet alert message doesn't show up.
The route is defined as following:
Route::get('/categories/destroy/{category}', [
'uses' => 'CategoriesController#destroy',
'as' => 'admin.categories.destroy',
]);
and the controller function is defined as:
public function destroy(Category $category)
{
$category->delete();
//this alert is working fine. however, the confirmation alert should appear
//before this one, which doesn't
Alert::success('Category deleted successfully', 'Success')->persistent("Close");
return redirect()->back();
}
Any help would be appreciated. Thanks.

Try this:
<script>
var deleter = {
linkSelector : "a#delete-btn",
init: function() {
$(this.linkSelector).on('click', {self:this}, this.handleClick);
},
handleClick: function(event) {
event.preventDefault();
var self = event.data.self;
var link = $(this);
swal({
title: "Confirm Delete",
text: "Are you sure to delete this category?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: true
},
function(isConfirm){
if(isConfirm){
window.location = link.attr('href');
}
else{
swal("cancelled", "Category deletion Cancelled", "error");
}
});
},
};
deleter.init();
</script>
EDIT: From your comment at #kalyan-singh-rathore's answer, I think you're not properly injecting the script in your blade template. If you're extending a base layout, make sure you've included the script or yielded it from a child layout.

Write anchor in below way.
Delete
Now in URL select change href to customParam.
function (isConfirm) {
if (isConfirm) {
window.location = link.attr('customParam');
} else {
swal("cancelled", "Category deletion Cancelled", "error");
}
}
Basically in your case both href and event lisner are on click.

Try this one it worked out for me :)
document.querySelector('#promote').addEventListener('submit', function (e) {
let form = this;
e.preventDefault(); // <--- prevent form from submitting
swal({
title: "Promote Students",
text: "Are you sure you want to proceed!",
type: "warning",
showCancelButton: true,
// confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, I am sure!',
cancelButtonText: "No, cancel it!",
closeOnConfirm: false,
closeOnCancel: false,
dangerMode: true,
}).then((willPromote) => {
e.preventDefault();
if (willPromote.value) {
form.submit(); // <--- submit form programmatically
} else {
swal("Cancelled", "No students have been promoted :)", "error");
e.preventDefault();
return false;
}
});
});

How to wait for user response on Meteor AutoForm submission?

I am using Meteor and Aldeed's Autoform. I want to check that the user is certain before submission takes place. I have tried many things but when I press the button, the form submits anyway. Here's what I have now, which produces a modal nicely (with SweetAlert) even though submission occurs in the background anyway:
AutoForm.hooks({
createEventForm: {
before: function() {
this.event.preventDefault();
},
beginSubmit: function() {
this.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: true },
function(){
swal("Deleted!", "Your imaginary file has been deleted.", "success"); });
},
How can I make the form wait for the user to confirm or cancel the operation?
Thanks!

The beginSubmit is called at the beginning of the form submission. As the documentation states, it can be used to disable/enable buttons or showing a wait message when submitting longer requests. If you want to display a confirmation message and submit the form depending on the user's decision, you need to use the before hook.
For example:
AutoForm.hooks({
createEventForm: hooksObject
});
var hooksObject = {
before: {
insert: function(doc) {
var self = this;
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: true
}, function(isConfirm) {
if (isConfirm) {
/* Submit form: */
self.result(doc);
swal("Deleted!", "Your imaginary file has been deleted.", "success");
} else {
/* Async cancel form submission: */
self.result(false);
}
});
}
}
}

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>

Sweet alert no works with cancel button

I'm using the sweet alert library and I have a problem with the cancel button. This is my code for the sweet alert:
sweetAlert({
title: title,
text: text + ' ' + courseList,
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: confirmButtonText,
cancelButtonText: "Continue with purchase",
closeOnConfirm: false,
closeOnCancel: false,
html: true
},
function(isConfirm) {
if (isConfirm) {
angular.forEach(repeatedCourses, function(repeatedCourse) {
$rootScope.$apply(function() {
this.removeCoursePurchase(repeatedCourse);
}.bind(this));
}.bind(this));
$rootScope.$broadcast('uncheckCheckboxes');
swal("Deleted!", "Your purchase has been refreshed.", "success");
} else {
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
}.bind(this));
When the user click on the confirm button, works fine, but If the cancel button is clicked doesn't do anything, it doesn't appear the "Cancelled" box and I don't know why!

Remove the .bind(this) attached to the callback function and it will work.