Develop Reference

having a problem getting the result from a sweetalert2

function confirmation() {
swal.fire({
title: "Are you sure?",
text: "Your about to delete some files",
type: "warning",
showCancelButton: true,
showConfirmButton: true,
confirmButtonText: 'Yes, I am sure!',
cancelButtonText: "No, cancel it!",
closeOnConfirm: false,
closeOnCancel: false
}).then((result) => {
if (result.isConfirmed) {
swal.fire("Deleted!", "files are successfully deleted!", "success");
} else {
window.location = "....";
}
});
}
but even if I confirm or deny it just cancels what can I do?
I also tried to use isDenied and still nothing.

For Cancel button in SweetAlert you should use .isDismissed() method of SweeetAlertResult Object. Also you used deprecated properties (closeOnConfirm, CloseOnCancel, type):
function confirmation() {
swal.fire({
title: "Are you sure?",
text: "Your about to delete some files",
icon: 'success',
showCancelButton: true,
showConfirmButton: true,
confirmButtonText: 'Yes, I am sure!',
cancelButtonText: "No, cancel it!",
}).then((result) => {
if (result.isConfirmed) {
swal.fire("Deleted!", "files are successfully deleted!", "success");
console.log("Delete files...")
}
if (result.isDismissed) {
swal.fire("Cancelled!", "Files not deleted!", "warning");
console.log("Doing Nothing")
}
});
}
JSFiddle: https://jsfiddle.net/sdurwc9y/
Click Cancel button is equal to click outside modal SweetAlert window. So you can just use else instead of if (result.isDismissed).

add sweetalert2 confirm delete in php without json data

How to use sweetalert2 with delete function in button href ?
i have button like this
<button type="button" id="btnDelete" href=" <?php echo site_url('administrator/master/delete/' . $a->idDept); ?>" class="btn btn-danger fa fa-trash but" data-toggle="tooltip" data-placement="top" title="Delete"></button>
$('.btnDelete').click(function() {
swal.fire({
title: 'Are you sure?',
text: "It will permanently deleted !",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then(function() {
swal.fire(
'Deleted!',
'Your file has been deleted.',
'success'
);
});
});
sweetalert2 working but not delete the data

You will need to pass the fetch/ajax method in Swal.fire call.
$('.btnDelete').click(function(e) {
e.preventDefault();
var url = $(this).attr('href');
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!',
preConfirm: () => {
return fetch(url)
.then(response => {
console.log(response);
if (!response.ok) {
throw new Error(response.statusText)
}
return response.json()
})
.catch(error => {
Swal.showValidationMessage(
`Request failed: ${error}`
)
})
}
}).then((result) => {
if (result.isConfirmed) {
Swal.fire(
'Deleted!',
'Your file has been deleted.',
'success'
)
}
});
});
Use this example codepan and modify it as you need.
https://codepen.io/ympervej/pen/wvJQyOr

How to use Sweetarlet2 delete?

I have an issue, I'm learning how to use sweetarlet2, I'm using spring project. I want to make a button that have arlet before delete it.
here my HTML button.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#delete" onclick="deleteArlet('+${ps.nama}+ ')"> delete </button>
and here my js script.
<script>
function deleteArlet(id){
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.value) {
url: "/siswa/delete/"+ Id,
data: { Id: Id }
Swal.fire(
'Deleted!',
'Your file has been deleted.',
'success'
)
}
})
}

try, if(result.isConfirmed) instead of if (result.value). that worked for me

Using SweetAlert2 in vue js to make a modal confirmation before deleting the item

I have an error in my sweetalert2 and I am using laravel vue in developing my app. What I want my app to happen is to create a confirmation modal for deleting a row in my database. Whenever I click "Yes", the item is removed but when I click the cancel button, the modal closes but also deletes the entire row. I am very confused as of the moment and this is my first time learning these frameworks and I want to learn more about this.
this is my code under the IndexComponent.vue
methods: {
deletePost(id) {
this.$swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!',
closeOnCancel: true
}).then((result) => {
//send request to server
let uri = `/api/post/delete/${id}`;
axios.delete(uri).then(response => {
this.posts.splice(this.posts.indexOf(id), 1);
});
if (result.value) {
this.$swal(
'Deleted!',
'Your post has been deleted!',
'success'
)
}
})
}
}
This is my button placed inside a td in my table:
<td><button #click="deletePost(post.id)" class="btn btn-danger">Delete</button></td>
This is what's inside my PostController.php:
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Resources\PostCollection;
use App\Post;
public function delete($id) {
$post=Post::find($id);
$post->delete();
return response()->json('Successfully deleted!');
}
All operations are working (CRUD) but when I tried to implement the sweetalert2 the deletions are multiple. Can someone please help me?

You have to write your API call inside if like this
methods: {
deletePost(id) {
this.$swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!',
closeOnCancel: true
}).then((result) => {
//send request to server
if (result.value) {
let uri = `/api/post/delete/${id}`;
axios.delete(uri).then(response => {
this.posts.splice(this.posts.indexOf(id), 1);
});
this.$swal(
'Deleted!',
'Your post has been deleted!',
'success'
)
}
})
}
}

Your splice index is incorrect. It will return -1, then it will delete the last item.
It should be
this.posts = this.posts.filter(post => post.id !== id)
Full code
methods: {
deletePost(id) {
this.$swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!',
closeOnCancel: true
}).then((result) => {
//send request to server
if (result.value) {
let uri = `/api/post/delete/${id}`;
axios.delete(uri).then(response => {
this.posts = this.posts.filter(post => post.id !== id)
this.$swal(
'Deleted!',
'Your post has been deleted!',
'success'
)
});
}
})
}
}

Delete method with sweetalert in ruby on rails

Hi I am new in using sweet alert js to make my alert box more fancy. I am using the normal javascript alert confirmation to delete a specific data in my table. However when I try to run a sweet alert confirmation before deleting it deletes the file without the confirmation popping up.
Here is the code in my JS below.
$(".delete-alert").click(function(event) {
event.preventDefault();
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 () {
swal(
'Deleted!',
'Your file has been deleted.',
'success'
)
});
});
this is my ruby on rails with HTML which calls the above js when clicking on trash icon
<%= link_to raw('<i class="fa fa-trash delete-alert"></i>'), candidate_path(f.id),method: :delete %>

Here is the perfect example how you should use Sweet alert.
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonClass: 'btn-danger',
confirmButtonText: 'Yes, delete it!',
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
},
function (isConfirm) {
if (isConfirm) {
// Call your delete item function here.
swal("Deleted!", "Your imaginary file has been ted!", "success");
} else {
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
});