确认删除 sweetalert 时显示数据名称

Question

我尝试使用 sweetalert 自定义确认删除，但在尝试显示已删除的数据名称时遇到了这个问题

这是删除表单：

    <button type="submit" onclick="deleteCategory('{{ $categories->id }}')" class="dropdown-item text-danger" href="#">
      <i class='bx bxs-trash-alt' ></i> Delete</button>
         <form action="{{ route('categories.destroy', $categories->id) }}" method="post"
             id="DeleteCategory{{ $categories->id }}">
             @csrf
             @method('delete')
         </form>

这是我的代码：

<script>
        function deleteCategory(id) {
            var name = $(this).data("name");
            var content = document.createElement('div');
            content.innerHTML = 'Menghapus kategori <strong>'+ name + '</strong> akan menghapus seluruh kategori didalamnya.';
            Swal.fire({
                title: 'Apakah kamu yakin?',
                html: content,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yakin, hapus kategori',
                cancelButtonText: 'Batalkan'
            })
            .then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        title: "Sedang menghapus Layanan",
                        showConfirmButton: false,
                        timer: 2300,
                        timerProgressBar: true,
                        onOpen: () => {
                            document.getElementById(`DeleteService${id}`).submit();
                            Swal.fire(
                            'Terhapus!',
                            'Category berhasil dihapus',
                            'success'
                            )
                        }
                    });
                }
            })
        }
    </script>

但它总是像这样未定义：

删除功能工作正常，但我的问题只是未定义的东西

Answer 1

假设 $categories->name 持有类别名称。

<button type="submit" onclick= "deleteCategory('{{$categories->id}}','{{$categories->name}}')" class="dropdown-item text-danger" href="#">
//
</button>

function deleteCategory(id, name) {
//
}

或者

<button type="submit" onclick="deleteCategory(this)" data-id="{{$categories->id}}" data-name="{{$categories->name}}" class="dropdown-item text-danger" href="#">
//
</button>

function deleteCategory(self) {
    var id = self.getAttribute("data-id");
    var name = self.getAttribute("data-name");
}

确认删除 sweetalert 时显示数据名称

Show data name when confirm delete sweetalert

javascript

jquery

laravel-blade

sweetalert2