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::resource('posts', PostsController::class);



* Remove the specified resource from storage.
* @param  \App\Models\Post  $post
* @return \Illuminate\Http\Response
public function destroy(Post $post)

    return response('Post deleted successfully.', 200);




namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Post extends Model
    protected $fillable = [

    use HasFactory;



<!DOCTYPE html>

        <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 -</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
        <script src=""></script>
        <script src=""></script>
        <script src="//"></script>
        <script type="text/javascript">
          $(document).ready(function() {

            $('.delete-form').on('submit', function(e) {
              var button = $(this);

                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) {
                    type: 'post',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    data: {
                      '_method': 'delete'
                    success: function (response, textStatus, xhr) {
                        icon: 'success',
                          title: response,
                          showDenyButton: false,
                          showCancelButton: false,
                          confirmButtonText: 'Yes'
                      }).then((result) => {

        <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 class="alert alert-success" role="alert">
                      <i class="fa fa-check"></i>
                      {{ $data }}

            <table class="table table-striped" id="users-table">
                  <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>
                @foreach($posts as $post)
                    <td><input type="checkbox" class="check"></td>
                        <form method="post" class="delete-form" data-route="{{route('posts.destroy',$post->id)}}">
                            <button type="submit" class="btn btn-danger btn-sm">Delete</button>


For more details about Sweetalert 2 visit their documentation.


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


Cheers :)