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();
        });
});

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