使用模态确认删除时表的id值为null时如何处理错误？

Posted 2023-03-14

【中文标题】使用模态确认删除时表的id值为null时如何处理错误？

【英文标题】：How to handle error when id value of table is null when using Modal confirm delete?

【发布时间】：2021-05-27 01:23:30

【问题描述】：

所以我有模态来确认删除操作，但是当表格数据为空/没有任何数据时，因为我没有要调用的 id 而出现错误？但如果我有超过 1 个数据，我的删除模式代码可以完美运行。当我删除表中的最后一个数据时会发生错误。

我已经尝试过了：

错误信息是：

Undefined variable $listproduct on --> index.blade.php)

Possible typo $listproduct
Did you mean $listproducts?

我的循环函数是 @foreach($listproducts as $listproduct)

这是我的按钮：

<td>
    <a href="#" class="btn btn-danger delete"
        data-toggle="modal"
        data-target="#deleteModal"
        productid="$listproduct->id"> Delete
    </a>
</td>

这是我的模态：

    <!-- Delete Warning Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="Delete" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Delete Contact</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action=" route('products.destroy', $listproduct->id ) " method="post">
                @csrf
                @method('DELETE')
                <div class="modal-body">
                    <label for="id">
                        <input id="id" name="productid">
                    </label>
                    <h5 class="text-center">Are you sure you want to delete this contact?</h5>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-sm btn-danger">Yes, Delete Contact</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- End Delete Modal -->

这是我获取 ID 的脚本（我在编写此代码时使用它：

<form action=" url('delete', 'id' ) " method="post">

but still not works

) :

$(document).on('click','.delete',function()
        let id = $(this).attr('productid');
        $('#id').val(id);
    );

这是我的产品控制器：

public function destroy($id): RedirectResponse

    $deleteads = Product::findOrFail($id);
    $deleteads->delete();
    return redirect('products');

这是我的路线（我正在使用资源）：

Route::group(['middleware' => ['auth']], function() 
***Route::resource('products', ProductController::class);***
Route::delete('/selected-products', [ProductController::class, 'deleteSelectedItem'])->name('products.deleteSelected');

);

【参考方案1】：

首先，您不能在 html 中使用自己的 productid 属性，因此您应该使用 data 属性来保存您的信息。 其次，您在模态中的表单没有更新其操作属性，因此只有一个产品 ID 保留在操作属性中。

尝试先在操作中添加#，然后当单击要删除的项目时，使用 JQuery 更新表单的操作并输入正确的 URL 和产品 ID。

您的 ID 应保存在数据属性中，如下所示：

<td>
    <a href="#" class="btn btn-danger delete"
        data-toggle="modal"
        data-target="#deleteModal"
        data-productid="$listproduct->id"> Delete
    </a>
</td>

模态中的表单：

<form action="#" method="post" id="delete_product_form">
    @csrf
    @method('DELETE')
    <div class="modal-body">
        <label for="id">
            <input id="id" name="productid">
        </label>
        <h5 class="text-center">Are you sure you want to delete this contact?</h5>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        <button type="submit" class="btn btn-sm btn-danger">Yes, Delete Contact</button>
    </div>
</form>

处理表单动作属性更新的jQuery代码：

$(document).on('click','.delete',function()
    let id = $(this).data('productid');
    $('#delete_product_form').attr('action', '/products/' + id);
);

【讨论】：

我的荣幸。请考虑将答案标记为已接受的答案。