如何在反馈控制器中添加弹出模式或甜蜜警报？

Question

当单击删除按钮确认删除时，我想弹出一个弹出或甜蜜的警告。我正在使用Laravel 9和Tailwind。这是我的代码：

public function index()
{
    if (request()->ajax()) {
        $query = Product::query();

        return DataTables::of($query)
            ->addColumn('action', function ($item) {
                return '
                        <a href="'.route('dashboard.product.gallery.index', $item->id).'" class="bg-indigo-500 text-white rounded-md px-2 py-1 m-2 ml-4">
                            Gallery
                        </a>
                        <a href="'.route('dashboard.product.edit', $item->id).'" class="bg-gray-500 text-white rounded-md px-2 py-1 m-2 ml-4">
                            Edit
                        </a>
                        <form class="inline-block" action="'.route('dashboard.product.destroy', $item->id).'" method="POST">
                            <button class=" bg-red-500 text-white rounded-md px-2 py-1 m-2 ml-4">
                                Delete
                            </button>
                                '.method_field('delete').csrf_field().'
                        </form>
                    ';
            })
            ->editColumn('price', function ($item) {
                return number_format($item->price);
            })
            ->rawColumns(['action'])
            ->make();
    }

    return view('pages.dashboard.product.index');
}

Answer 1

你的看法/前排。您可以在删除按钮上调用模态或甜蜜警报，它将显示模式。然后在模式内，制作一个带有按钮提交的post表单来执行您的删除功能。

这里是我的例子，based on modal from bootstrap

​

<!-- Button Delete trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Delete
</button>

<!-- Modal/Pop-up Delete-->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Are you sure delete this item?</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Bla bla bla
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        
        <!-- Make sure depens on your delete route -->
        <form action="/delete" method="post">
        <button type="submit" class="btn btn-primary">Yes</button>
        </form>
      </div>
    </div>
  </div>
</div>

​