Laravel Sweet Alert2 Confirm Delete Example

Laravel 6 , Laravel , Laravel 7

Nicesnippets

1034

03-06-2020


Hi Guys

Now, let's see post of laravel 7/6 sweetalert record delete. you'll learn laravel sweet alert2 box using data delete. if you have question about laravel sweetalert2 then i will give simple example with solution. This post will give you simple example of sweet alert2 for laravel 7/6 example. you will do the following things for laravel 7/6 sweetalert2 using record delete.

In this example,we will learn how to open sweetalert2 before deleting user in laravel 7/6 application. I will show sweetalert2 jquery plugin using delete in laravel 7/6.I will show easy example of sweet alert2 before deleting user in laravel 7/6.

Sweetalert2.js provide us very simple it's simply use event of their plugin. So let's see bellow full example and you can implement sweet alert2 model before delete record in your web application.

Here the example of sweetalert2 before deleting user in laravel 7/6.

Step 1: Add Table and Dummy Records

I always prefer to give example from scratch, So in this example we will create "users" table with id, name, email, created_at and updated_at column. So you have to create table using migration and run that. After created successfully create table, make sure add some dummy data like as bellow

INSERT INTO `products` (`id`, `name`, `email`, `created_at`, `updated_at`) VALUES

(1, 'Mln, 'Pqr@gmail.com', NULL, NULL),

(3, 'Demo, 'Demo@gmail.com', NULL, NULL),

Step 2: Add New Route

In this step, we are doing from scratch so we will add two routes, one for display data and another for delete request. So you have to simply add two new routes in your laravel application.

routes/web.php

Route::get('users', 'TestController@index');

Route::post('users/{id}','TestController@destroy')->name('users.destroy');

Step 3: Create UserController

In third step, we will create new UserController file to handle request of created two new route. In this Controller we define two method, index() and destroy(). Both method will handle route request. So let's create new controller and put code:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\User;

class TestController extends Controller

{

public function index()

{

$users = User::get();

return view('user',compact('users'));

}

public function destroy(Request $request,$id)

{

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

return back();

}

}

Step 4: Create user blade file

In last step we will create user.blade.php file and write code of display user detail and sweet alert code.

<!DOCTYPE html>

<html>

<head>

<title>Laravel Sweet Alert2 Confirm Delete Example-nicesnippets.com</title>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css">

<script src="http://demo.itsolutionstuff.com/plugin/jquery.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.2.0/sweetalert2.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.2.0/sweetalert2.all.min.js"></script>

<meta name="csrf-token" content="{{ csrf_token() }}">

</head>

<body class="bg-dark">

<div class="container">

<div class="row">

<div class="col-md-8 offset-md-2">

<div class="card mt-5">

<div class="card-header">

<h5>Laravel Sweet Alert2 Confirm Delete Example-nicesnippets.com</h5>

</div>

<div class="card-body">

<table class="table table-bordered">

<tr>

<td>Name</td>

<td>Email</td>

<td width="5%">Action</td>

</tr>

@foreach($users as $user)

<tr>

<td>{{ $user->name }}</td>

<td>{{ $user->email }}</td>

<td>

<button class="btn btn-danger btn-flat btn-sm remove-user" data-id="{{ $user->id }}" data-action="{{ route('users.destroy',$user->id) }}" onclick="deleteConfirmation({{$user->id}})"> Delete</button>

</td>

</tr>

@endforeach

</table>

</div>

</div>

</div>

</div>

</div>

<script type="text/javascript">

function deleteConfirmation(id) {

swal({

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');

$.ajax({

type: 'POST',

url: "{{url('/users')}}/" + 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 {

e.dismiss;

}

}, function (dismiss) {

return false;

})

}

</script>

</body>

</html>

Now we are ready to run our example so run bellow command for quick run:

php artisan serve

Now you can open bellow URL on your browser:

http://localhost:8000/users

It will help you...


Recommended Posts