如何在 laravel 的 CategoryController 中销毁方法？

Question

我想使用模态删除数据，我已经获得了要删除的数据的 id，但是当我单击模态中的删除按钮时没有任何反应。如果有问题请告诉我。非常感谢。

我在将数据传输到我的删除确认模式时遇到问题。我已经验证了我的删除路线可以从数据库中删除数据，但我面临的问题是我无法将 categoty->id 传递到模态以进行删除。

刀片和ajax

 @extends('Admin.master')

@section('content')
    <div class="col-md-10 p-5 pt-2">
        <h3><i class="fas fa-tachometer-alt ml-2"></i>دسته بندی ها</h3><hr>
        <a href="{{ route('categories.create') }}" class="btn btn-primary mb-3">
            <i class="fas fa-plus-square"></i>
            افزودن دسته بندی جدید
        </a>
        <div class="table-responsive">
            <table class="table table-bordered table-striped">
                <thead>
                <tr>
                    <th>#</th>
                    <th>نام دسته</th>
                    <th>تاریخ ایجاد شده</th>
                    <th>اکشن ها</th>
                </tr>
                </thead>
                <tbody>
                @foreach($categories as $category)
                    <tr>
                        <td>{{ $category->id }}</td>
                        <td>{{ $category->name }}</td>
                        <td>{{ $category->created_at }}</td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <a href="{{ route('categories.edit', $category->id) }}"  class="btn btn-primary">ویرایش</a>
                                <button type="button" class="btn btn-danger" data-action="{{ route('categories.destroy', $category->id) }}" data-toggle="modal" data-target="#deleteCategory">حذف</button>
                            </div>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <div class="modal fade" id="deleteCategory" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="deleteCategory" aria-hidden="true">
        <div class="modal-dialog modal-sm" role="document">
            <form action="{{ route('categories.destroy', $category->id) }}">
                @csrf
                @method('DELETE')
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">این عمل برگشت پذیر نیست..</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        آیا از حذف {{ $category->name }} اطمینان دارید؟
                        <input type="hidden" id="category" name="category">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn bg-white" data-dismiss="modal">بستن</button>
                        <button type="submit" class="btn btn-danger" data-action="{{ route('categories.destroy', $category->id) }}" data-toggle="modal" data-target="#deleteCategory">حذف</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $('#deleteCategory').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var action = button.data('action');
            var modal = $(this);
            modal.find('form').attr('action', action);
        });
    </script>
@endsection

CategoryController.php

public function destroy(Category $category)
{
    dd($category);
}

web.php

Route::resource('categories', 'CategoryController');

我想去CategoryController.php中的destroy方法。

它甚至没有显示dd。

Answer 1

我认为你应该改变你的设置方式。在我看来，如果表单位于另一个页面中，您想要设置表单的方式将起作用，因此当单击删除类别按钮时，浏览器将重定向到另一个页面而不是模式。 为了让它按照我认为你想要的方式工作，你可以使用一些 HTML 数据属性。 首先，模态中的表单应该类似于

<form id="form-delete-category">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title">این عمل برگشت پذیر نیست..</h5>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <!-- a span is used as a container to show the category name -->
      آیا از حذف <span id="category-name"></span> اطمینان دارید؟
      <input type="hidden" id="category" name="category">
    </div>
    <div class="modal-footer">
      <button type="button" class="btn bg-white" data-dismiss="modal">بستن</button>
      <!-- this is button type so no submit event is triggered -->
      <button type="button" class="btn btn-danger" id="handle_delete">حذف</button>
    </div>
  </div>
</form>

现在打开modal的按钮可以改成：

<button type="button" class="btn btn-danger" data-category="{{$category}}" id="btn-delete-category">حذف</button>

我设置了整个类别对象，但你只能使用你需要的东西。在这种情况下，您的 JS 会发生一些变化。

<button type="button" class="btn btn-danger" data-category-id="{{$category->id}}" data-category-name="{{$category->name}}" id="btn-delete-category">حذف</button>

在您的 java 脚本中添加一个函数来处理单击事件，如下所示：

$("#btn-delete-category").on("click", function(e) {
  e.preventDefault();

  // get the category object using the data() function
  let  category = $(this).data('category');
  
  /**
   * If only the name and id where set just get them separatly
   * 
   * let  id = $(this).data('category-id');
   * let  name = $(this).data('category-name');
  */

  // Set the variables in your dom
  $('#category-name').html(category.name);
  $('#category').html(category.id);

  // Generate the URL to delete this category
  $('#form-delete-category').attr('action', route_to_delete_category + category.id);

  // Show the modal
  $('#deleteCategory').modal('show');

});

$("#handle_delete").on("click", function(e) {
  e.preventDefault();

  // Show loading state

  $.ajax({
    url: $(this).attr('action'),
    type: 'DELETE'
  })
  .done(function(response) {
    // Hide loading state
    // Show success message
    $('#deleteCategory').modal('hide');
  })

});