DEV Community

Cover image for Laravel 8 - SweetAlert2 with AJAX (3 Easy Steps)🍬🍭🧁

Posted on

Laravel 8 - SweetAlert2 with AJAX (3 Easy Steps)🍬🍭🧁

What is SweetAlert2?

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

Image description

Read more about sweetalert2 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
Enter fullscreen mode Exit fullscreen mode

Open user controller and paste this code:


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,
Enter fullscreen mode Exit fullscreen mode

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:


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

Route::get('users', [UserController::class, 'users']);
Route::post('delete/{id}', [UserController::class, 'delete']);
Enter fullscreen mode Exit fullscreen mode

Now let's insert some fake user data using factory and seeder:

\App\Models\User::factory(5)->create(); // 5 fake user data
Enter fullscreen mode Exit fullscreen mode

Read more about factory and seeder here.

Image description

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">
    <!-- 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="">
    <!-- jquery -->
    <script src=""></script>
    <!-- SweetAlert2 -->
    <link rel="stylesheet" href="">
    <script src=""></script>

    <title>How to Use SweetAlert2 with AJAX in Laravel 8.x</title>
<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">

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

<script type="text/javascript">
    function deleteConfirmation(id) {{
            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');

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

            } else {

        }, function (dismiss) {
            return false;
Enter fullscreen mode Exit fullscreen mode

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

Run and See Output

Run the Laravel project

php artisan serve
Enter fullscreen mode Exit fullscreen mode

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

Image description

Click Delete button and the SweetAlert2 confirmation box will appear:
Image description

Click Yes button, the data will be deleted via AJAX and you will see a confirmation message like this:
Image description

Hurray! We have succesfully created and tested sweetalert2, use this on your future projects to make it more beautiful!

Image description

Top comments (0)