Table of contents

integrate sweetalert 2 with ajax in laravel 8

In this post, I'm sharing how to integrate sweetalert 2 with ajax in Laravel 8. In my previous post, I shared about bootbox alert with ajax in Laravel. It's up to you if what is your choice. We know that we need a confirmation box to prevent unexpected clicks of the delete button.

 

integrate sweetalert 2 with ajax in laravel 8

 

In this example, we have a controller, model, route, and blade. Just continue to read the below steps:

 

Route:

Route::resource('posts', PostsController::class);

 

Controller:

/** * Remove the specified resource from storage. * * @param \App\Models\Post $post * @return \Illuminate\Http\Response */ public function destroy(Post $post) { $post->delete(); return response('Post deleted successfully.', 200); }

 

Model:

<?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; class Post extends Model { protected $fillable = [ 'title', 'description', 'body' ]; use HasFactory; }

 

Blade:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="csrf-token" content="{{ csrf_token() }}"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Delete Record using Ajax in Laravel 8 - codeanddeploy.com</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script> <script type="text/javascript"> $(document).ready(function() { $('.delete-form').on('submit', function(e) { e.preventDefault(); var button = $(this); Swal.fire({ icon: 'warning', title: 'Are you sure you want to delete this record?', showDenyButton: false, showCancelButton: true, confirmButtonText: 'Yes' }).then((result) => { /* Read more about isConfirmed, isDenied below */ if (result.isConfirmed) { $.ajax({ type: 'post', headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, url: button.data('route'), data: { '_method': 'delete' }, success: function (response, textStatus, xhr) { Swal.fire({ icon: 'success', title: response, showDenyButton: false, showCancelButton: false, confirmButtonText: 'Yes' }).then((result) => { window.location='/posts' }); } }); } }); }) }); </script> </head> <body> <div class="container mt-5"> @if(Session::get('success', false)) <?php $data = Session::get('success'); ?> @if (is_array($data)) @foreach ($data as $msg) <div class="alert alert-success" role="alert"> <i class="fa fa-check"></i> {{ $msg }} </div> @endforeach @else <div class="alert alert-success" role="alert"> <i class="fa fa-check"></i> {{ $data }} </div> @endif @endif <table class="table table-striped" id="users-table"> <thead> <tr> <th scope="col"><input type="checkbox" class="check-all"></th> <th scope="col">Title</th> <th scope="col">Description</th> <th scope="col">Body</th> <th scope="col">Delete</th> </tr> </thead> <tbody> @foreach($posts as $post) <tr> <td><input type="checkbox" class="check"></td> <td>{{$post->title}}</td> <td>{{$post->description}}</td> <td>{{$post->body}}</td> <td> <form method="post" class="delete-form" data-route="{{route('posts.destroy',$post->id)}}"> @method('delete') <button type="submit" class="btn btn-danger btn-sm">Delete</button> </form> </td> </tr> @endforeach </tbody> </table> </div> </body> </html>

 

For more details about Sweetalert 2 visit their documentation.

 

That's it I hope it helps. Thank you for reading.

 

Cheers :)

Read next