Laravel Sweet Alert Confirm Delete Example

Laravel 6 , Laravel , Laravel 7

Nicesnippets

24892

19-02-2020


Laravel Sweet Alert Confirm Delete Example

Hi Guys

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

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

Sweetalert.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 alert model before delete record in your web application.

We will sweetalert before deleting user in laravel 7/6. so in this example we will using "users" table using laravel migration and write code for route, controller and view step by step.

Here the example of sweetalert 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, 'Pqr, '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.

following path:/routes/web.php

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

Route::delete('users/{id}','UserController@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 UserController 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 Alert 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/sweetalert/1.1.3/sweetalert.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.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 Alert 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) }}"> Delete</button>

</td>

</tr>

@endforeach

</table>

</div>

</div>

</div>

</div>

</div>

<script type="text/javascript">

$("body").on("click",".remove-user",function(){

var current_object = $(this);

swal({

title: "Are you sure?",

text: "You will not be able to recover this imaginary file!",

type: "error",

showCancelButton: true,

dangerMode: true,

cancelButtonClass: '#DD6B55',

confirmButtonColor: '#dc3545',

confirmButtonText: 'Delete!',

},function (result) {

if (result) {

var action = current_object.attr('data-action');

var token = jQuery('meta[name="csrf-token"]').attr('content');

var id = current_object.attr('data-id');

$('body').html("<form class='form-inline remove-form' method='post' action='"+action+"'></form>");

$('body').find('.remove-form').append('<input name="_method" type="hidden" value="delete">');

$('body').find('.remove-form').append('<input name="_token" type="hidden" value="'+token+'">');

$('body').find('.remove-form').append('<input name="id" type="hidden" value="'+id+'">');

$('body').find('.remove-form').submit();

}

});

});

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