Delete Modal Popup with Laravel, Bootstrap and jQuery

Controller.php

public function index(){
    $categoryList = Category::all();
    return view('category.list')->with('categoryList', $categoryList);
}

list.blade.php

<div>
    @include('modal')

    <table class="table table-bordered table-striped table-hover category-table" data-toggle="dataTable" data-form="deleteForm">
        <thead>
        <tr>
            <th>Name</th>
            <th>Action</th>
        </tr>
        </thead>
        <tbody>
        @foreach($categoryList as $category)
            <tr>
                <td>{{ $category->category_name }}</td>
                <td>
                    <a href="{{ route('categories.edit', $category->id) }}" class="btn btn-info btn-xs">{{ trans('categories.edit') }}</a>

                    {!! Form::model($category, ['method' => 'delete', 'route' => ['categories.destroy', $category->id], 'class' =>'form-inline form-delete']) !!}
                    {!! Form::hidden('id', $category->id) !!}
                    {!! Form::submit(trans('categories.delete'), ['class' => 'btn btn-xs btn-danger delete', 'name' => 'delete_modal']) !!}
                    {!! Form::close() !!}
                </td>
            </tr>
        @endforeach
        </tbody>
    </table>
</div>

modal.blade.php

<div class="modal" id="confirm">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Delete Confirmation</h4>
            </div>
            <div class="modal-body">
                <p>Are you sure you, want to delete?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-primary" id="delete-btn">Delete</button>
                <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

script.js

$('table[data-form="deleteForm"]').on('click', '.form-delete', function(e){
    e.preventDefault();
    var $form=$(this);
    $('#confirm').modal({ backdrop: 'static', keyboard: false })
        .on('click', '#delete-btn', function(){
            $form.submit();
        });
});

very thanks

Just what I needed, Many thanks!

wow, It's work. Thank you so much.

I am a stater of laravel, when I did it . it is not working please help me

File script.js? => in the code not see others file call file script.js to use so how can it work?

Just what I needed, Thank you so much.

Very Thanks!!! Perfect!

Brillante

Thank you so much , Perfect!

Thanks!

It didn't work for me right away yet after some debugging it works as long as I wrap the javascript part in document.ready like so:

  $(document).ready(function () {
       $('table[data-form="deleteForm"]').on('click', '.form-delete', function(e){
           e.preventDefault();
           var $form=$(this);
           $('#confirm').modal({ backdrop: 'static', keyboard: false })
                   .on('click', '#delete-btn', function(){
                       $form.submit();
                   });
       });
   });

However, awesome snip! Thanks a lot 👍

Gracias!

Thanks.

Thank you so much! Very helpful! :)

Very good, I just have a question, how can I pass the name to the modal?
Ex:
<p> Are you sure you want to delete? NAME to be deleted </ p>

Awesome...

Although this would work if the delete button was the only button in the form. If there were other buttons like 'Edit' or 'View', there would be a conflict where the form will show the delete modal upon click.

If you transfer the form to only have the Delete button inside it, it would fix the issue but there would be an inconsistency with the design where the delete button will appear at the next line.

To fix this, just add
form { display: inline; }

Thanks, it works :)

Thank you!

terima kasih

Thanks alot. This was so precise