Use SweetAlert2 with AJAX in Laravel

Published on May 01, 2019

Today I am going to share how to use SweetAlert2 in Laravel with AJAX. This tutorial isn’t for very beginners. That’s why I won’t share how to create a route, controller, views etc. I’m assuming that you know those. So let’s start.

Note: The article is deprecated. Please check this How to Use SweetAlert2 with AJAX in Laravel 8.x & Up.

Table of Contents

  1. Create Methods in Controller
  2. Define Route
  3. Apply SweetAlert2 with AJAX in Blade File
  4. Run and See Output

Step 1 : Create Methods in Controller

I’ve created a controller named “UserController”. In that controller, I’m going to create two methods. One for getting all users and another for deleting a user. My methods look like:


namespace App\Http\Controllers;

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

class UserController extends Controller

    public function users()
        $users = User::all();
        return view('users', compact('users'));

    public function delete($id)
        $delete = User::where('id', $id)->delete();

        // 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,

Step 2 : Define Route

Let’s register the routes for the two methods:


Route::get('users', '[email protected]');
Route::post('delete/{id}', '[email protected]');

Step 3 : Apply SweetAlert2 with AJAX in Blade File

Create a view named “users.blade.php” and paste this code:

<!doctype html>
<html lang="en">
    <!-- Required 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=""
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <!-- jquery -->
    <script src=""></script>
    <!-- SweetAlert2 -->
    <link rel="stylesheet" href="">
    <script src=""></script>

    <title>Use SweetAlert2 with AJAX in Laravel</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?",
            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) {
                            swal("Done!", results.message, "success");
                        } else {
                            swal("Error!", results.message, "error");

            } else {

        }, function (dismiss) {
            return false;

In the file I’ve set on AJAX confirmation button click. Take a look at the code. I hope you can understand. If you face any problem, write to me.

Update: For the latest version of SweetAlert2, we have to use instead of swal. Example:

// latest version'Hello world!')

// older version
Swal('Hello world!')

Step 4 : Run and See Output

Now run the Laravel project and visit this route
http://localhost:8000/users. You will see a page like this:

Click the Delete button to see the SweetAlert2 confirmation box.

If you select Yes button, the data will be deleted via AJAX and you will see a confirmation message like this:

The tutorial is over. Thank you. ?

Comments (0)