Laravel 5.5 – Delete Confirm Bootstrap jQuery Model

Hello, everyone in this article we are share with you how to delete records in laravel with bootstrap confirm model. when we are want delete any entry or records in laravel it’s very simple but delete with confirm model it is some hard for some laravel developers.

In this article we are write one jquery delete snippet code which you can use in entiry all application. no need to all time write saperate code for it.

Why Confirm Model Required?

Confirm model is required in big project because in this project each and every entry or records more important. just thinks you not use confirm model message before delete any records is not goot for some user freindly interface. once you by-mistack press or click on delete button and you not aply confirm model on it so, at a time your antry or records delete.

In short confirm message model functionality is work as a reduce some human by-mistact operation in our application.

Follow this simple step for add confirm bootstrap model on laravel delete records.

Step : 1 Add Route

First, we have neet to write tqo route one is for listing all records and second is for delete records. so open your routes/web.php file and add following two routes in it.

Route::get('posts', '[email protected]')->name('posts');
Route::delete('posts/{id}', '[email protected]')->name('post-delete');

[ADDCODE]

Step : 2 Create Controller

Next, create PostController.php file in app/Http/Controllers folders and simple add following code in it.

namespace AppHttpControllers;

use IlluminateHttpRequest;
use DB;
use Session;

class ProductController extends Controller
{
    /**
     * Show the application dashboard.
     *
     * @return IlluminateHttpResponse
     */
    public function index()
    {
        $posts = DB::table("posts")->get();
        return view('posts',compact('posts'));
    }

    /**
     * Show the application dashboard.
     *
     * @return IlluminateHttpResponse
     */
    public function destroy($id)
    {
    	DB::table("posts")->delete($id);
    	Session::put('success', 'Your Record Deleted Successfully.');
    	return redirect()->route('posts');
    }
}

Step : 3 Create blade/view File

Next, we are create post.blade.php file in resources/views folders and listing all post in table formate with one delete button.

This is demo article so, we are add confirm model in this file but you use this delete model in your all project you should be add in your laravel main layout file.

@extends('layouts.app')
@section('content')
<div >
    <div >
        <div >
            <div >
                @if ($message = Session::get('success'))
                <div >
                    <button type="button"  data-dismiss="alert" aria-hidden="true"></button>
                    {!! $message !!}
                </div>
                <?php Session::forget('success');?>
                @endif                
                <div >All Posts</div>
                <div >
                    <table >
                    	<thead>
                    		<tr>                    			
	                    		<th>Title</th>
	                    		<th>Description</th>
	                    		<th>Action</th>
                    		</tr>
                    	</thead>
                    	<tbody>
                            @foreach($post as $key => $value)
                                <tr>
                                    <td>{!! $value->title !!}</td>
                                    <td>{!! $value->description !!}</td>
                                    <td>
                                        <a  data-toggle="modal" data-url="{!! URL::route('post-delete', $value->id) !!}" data-id="{{$value->id}}" data-target="#custom-width-modal">Delete</a>
                                    </td>
                                </tr>
                            @endforeach                            
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Delete Model -->
<form action="" method="POST" >
    <div id="custom-width-modal"  tabindex="-1" role="dialog" aria-labelledby="custom-width-modalLabel" aria-hidden="true" style="display: none;">
        <div  style="width:55%;">
            <div >
                <div >
                    <button type="button"  data-dismiss="modal" aria-hidden="true">×</button>
                    <h4  id="custom-width-modalLabel">Delete Record</h4>
                </div>
                <div >
                    <h4>You Want You Sure Delete This Record?</h4>
                </div>
                <div >
                    <button type="button"  data-dismiss="modal">Close</button>
                    <button type="submit" >Delete</button>
                </div>
            </div>
        </div>
    </div>
</form>
@endsection

@section('script')
<script src="{{ asset('custom.js') }}"></script>
@endsection	

Look at the below code we are add custom.js file in script section so you must be create this section in your main layout file.

Step : 4 Create custom.js File

Last things we need to create custom.js file in public derectory and simply add following js code for confirm delete popup.

$(document).ready(function(){
	// For A Delete Record Popup
	$('.remove-record').click(function() {
		var id = $(this).attr('data-id');
		var url = $(this).attr('data-url');
		var token = CSRF_TOKEN;
		$(".remove-record-model").attr("action",url);
		$('body').find('.remove-record-model').append('<input name="_token" type="hidden" value="'+ token +'">');
		$('body').find('.remove-record-model').append('<input name="_method" type="hidden" value="DELETE">');
		$('body').find('.remove-record-model').append('<input name="id" type="hidden" value="'+ id +'">');
	});

	$('.remove-data-from-delete-form').click(function() {
		$('body').find('.remove-record-model').find( "input" ).remove();
	});
	$('.modal').click(function() {
		// $('body').find('.remove-record-model').find( "input" ).remove();
	});
});

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

php artisan serve

Now you can open bellow URL on your browser:

	
http://localhost:8000/posts

If you want to any problem then please write comment and also suggest for new topic for make tutorials in future. Thanks…