Laravel 8 - SweetAlert2 with AJAX (3 Easy Steps)🍬🍭🧁
Tags: php, laravel, ajax, beginners
Published: 2022-02-26 05:04:44

**What is SweetAlert2?**

> SweetAlert2 is a beautiful, customizable, accessible replacement for javascript's pop-up boxes with zero dependencies!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hjzjkdbe4a1s3s6kfkbk.gif)

Read more about [sweetalert2](https://sweetalert2.github.io/) here.

Now that you have a good understanding of `sweetalert2`, lets start!

## STEP 1: Create Controller

Create user controller using this command:
```
php artisan make:controller UserController
```

Open user controller and paste this code:
```
<?php

namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Http\Request;

class UserController extends Controller
{
    // all users
    public function users()
    {
        $users = User::all();
        return view('users', compact('users'));
    }

    // delete user
    public function delete($id)
    {
        $delete = User::destroy($id);

        // check data deleted or not
        if ($delete == 1) {
            $success = true;
            $message = "User deleted successfully";
        } else {
            $success = true;
            $message = "User not found";
        }

        //  return response
        return response()->json([
            'success' => $success,
            'message' => $message,
        ]);
    }
}
```

Here we’ve created two functions. One for getting all users and another for deleting user.

## Step 2: Define Routes & Insert Fake data

Let’s define routes for those two functions:
```
<?php

use App\Http\Controllers\UserController;
use Illuminate\Support\Facades\Route;

Route::get('users', [UserController::class, 'users']);
Route::post('delete/{id}', [UserController::class, 'delete']);
```

Now let's insert some fake user data using factory and seeder:
```
\App\Models\User::factory(5)->create(); // 5 fake user data
```

Read more about [factory and seeder](https://dev.to/dalelantowork/laravel-8-factory-and-seeders-generating-thousands-of-dummy-data-instantly-4mi2) here.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9l0viz4uya0q56eoqx61.png)

## Step 3: Set SweetAlert2 with AJAX in the Blade File

Create a view named `users.blade.php` and paste this code:
```
<!doctype html>
<html lang="en">
<head>
    <!-- meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- csrf-token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css">
    <!-- jquery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <!-- SweetAlert2 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/10.5.1/sweetalert2.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/10.5.1/sweetalert2.all.min.js"></script>

    <title>How to Use SweetAlert2 with AJAX in Laravel 8.x</title>
</head>
<body class="container" style="margin-top: 40px;">

<div class="row" style="margin-bottom: 20px;">
    <div class="col-lg-12 margin-tb">
        <div class="pull-left">
            <h3>Users</h3>
        </div>
    </div>
</div>

<table class="table table-bordered">
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
        <th width="280px">Actions</th>
    </tr>
    @foreach ($users as $user)
        <tr>
            <td>{{ $user->id }}</td>
            <td>{{ $user->name }}</td>
            <td>{{ $user->email }}</td>
            <td>
                <button class="btn btn-danger" onclick="deleteConfirmation({{$user->id}})">Delete</button>
            </td>
        </tr>
    @endforeach
</table>

<script type="text/javascript">
    function deleteConfirmation(id) {
        swal.fire({
            title: "Delete?",
            icon: 'question',
            text: "Please ensure and then confirm!",
            type: "warning",
            showCancelButton: !0,
            confirmButtonText: "Yes, delete it!",
            cancelButtonText: "No, cancel!",
            reverseButtons: !0
        }).then(function (e) {

            if (e.value === true) {
                var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

                $.ajax({
                    type: 'POST',
                    url: "{{url('/delete')}}/" + id,
                    data: {_token: CSRF_TOKEN},
                    dataType: 'JSON',
                    success: function (results) {
                        if (results.success === true) {
                            swal.fire("Done!", results.message, "success");
                            // refresh page after 2 seconds
                            setTimeout(function(){
                                location.reload();
                            },2000);
                        } else {
                            swal.fire("Error!", results.message, "error");
                        }
                    }
                });

            } else {
                e.dismiss;
            }

        }, function (dismiss) {
            return false;
        })
    }
</script>
</body>
</html>
```

Now that we've finished setting everything up, let's check it out!

## Run and See Output

Run the Laravel project 
```
php artisan serve
```

Visit this route `http://localhost:8000/users` and you will see a page like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4w0jt0ji1o2fhmjcihza.png)

Click **Delete** button and the SweetAlert2 confirmation box will appear:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2mu76fpm4kl1euoim2av.png)
 
Click **Yes** button, the data will be deleted via AJAX and you will see a confirmation message like this:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b3jqo7em5drmfbhm05co.png)
 
> Hurray! We have succesfully created and tested `sweetalert2`, use this on your future projects to make it more beautiful! 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dpuotv698az8qh7ym0qs.gif)