bal4x's avatar
Level 1

SweetAlert Confirm Delete

Hello, i'm try to make confirmation before delete some post using sweetalert from this package https://realrashid.github.io/sweet-alert/ , but doesn't work, search on internet doesn't helping me. I'm just start learn javascript today and very bad with it.

(Controller) - Delete Function :

public function hapus($id_tags)
 {
     
     $tags = Tag::where('id_tags',$id_tags)->first();
     Tag::where('id_tags',$id_tags)->delete();
     toast('Tags deleted!','success');
     return redirect('tags/tag');
 }

In (View)

<a href="/tags/tag/hapus/{{$tag->id_tags}}" class="btn btn-danger"><i class="far fa-trash-alt"></i></a>

Can someone help me , how to use the confirmation of sweetalert ? Really appreciate any kind of help. Thank you

0 likes
4 replies
divinulledivi's avatar

You linked to the old version of SweetAlert. Here's the link to SweetAlert2 - https://sweetalert2.github.io/ Scroll down to the examples and the one that says "A confirm dialog, with a function attached to the "Confirm"-button..." is a good template for what you want to do.

To implement this you would have to:

  1. Add a click event which fires the SweetAlert modal.
  2. In the then() callback you need to make a ajax call to the route that corresponds to the hapus() method on your controller. The easiest and cleanest way to do this would be to use axios.
  3. remove the redirect() statement from your controller and change the current url with JavaScript.

But since you mentioned that you are new to JavaScript this might not be the best option at the moment. Before I started learning JavaScript I used Bootstrap modals which worked great for these kinds of confirmations - add a delete button that triggers a Bootstrap modal where the button that confirms deletion is wrapped within a form element that posts to your delete route. Much simpler and the idea is pretty much the same.

https://getbootstrap.com/docs/4.0/components/modal/

1 like
bal4x's avatar
Level 1

Thank you so much for replying to discussion, if i want to try use the SweetAlert2 did you have a simple implement code for the beginners like me ?

But i think I'm gonna start with Bootstrap Modal first. Thank you

divinulledivi's avatar
Level 7

Something like this should work:

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) {
   axios.delete('your/route').then(() => {
       window.location.href = '/tags/tag'
   });
  }
})

As for your controller method - you could use Laravel's built in model binding: https://laravel.com/docs/5.8/routing#route-model-binding

If your route has a variable {tag} - for example tags/{tag} then you can type hint it and refactor your controller:

public function hapus(Tag $tag)
 {
     $tag->delete();
     toast('Tags deleted!','success');

     return redirect('tags/tag');
 }

Laravel automatically uses id passed in the route to fetch the model you need. In your case you are not using id as an identifier, but you can override it in the Tag model class like this:

public function getRouteKeyName()
{
    return 'id_tags';
}

Even if you don't want to use model binding - there is no need for this:

$tags = Tag::where('id_tags',$id_tags)->first();
Tag::where('id_tags',$id_tags)->delete();

You are querying your database twice. You can do it in one line:

Tag::where('id_tags',$id_tags)->first()->delete();
1 like
bal4x's avatar
Level 1

Thank you, really easy to understand. But, how about the button do i need use/modify something on this code?

<a href="/tags/tag/hapus/{{$tag->id_tags}}" class="btn btn-danger"><i class="far fa-trash-alt"></i></a>

Please or to participate in this conversation.