尝试使用模式弹出窗口删除数据，未获得所选项目的正确id

Question

我有一个包含许多记录的表视图，我希望每个记录都有一个delete按钮，它将提示用户确认删除。我可以使用正确的按钮(从表格中看到)来提示模式，但是模式中的按钮，即确认删除的按钮，没有传递正确的id。例如，我的表中显示了3条记录，它们的ID分别为1、2和3。但是我编写我的表的方式(将显示下面的代码)使其在用户单击所需记录上的任何删除按钮时，会弹出模式框，其中“delete (确认)”按钮的ID是所有记录中最新的。在这种情况下，ID是3。我希望它传递正确的ID。这意味着如果我想删除记录1，它将传递ID 1和记录2，依此类推

我试着研究我的JavaScript做错了什么，但似乎还好，目前似乎没有任何帮助。我试着把整个模型放到我的表中，但它仍然有同样的问题…

<!-- DataTables Example -->
    <div class="card mb-3">
      <div class="card-header">
        <i class="fas fa-table"></i>
        Advertisements 
        <div></div>
      </div>

      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
            <thead>
              <tr>
                <th>Title</th>
                <th>Description</th>
                <th>Image</th>
                <th>Status</th>
                <th>Sort No.</th>
                <th>Updated By</th>
                <th>Expired At</th>
                <th>Updated At</th>
                <th> </th>
                <th> </th>
              </tr>
            </thead>
            <tbody>
              @foreach ($advertisements as $advertisement)
              <tr>
                <td>{{ $advertisement->media->title }}</td>
                <td>{{ $advertisement->media->description }}</td>
                <td><img src="{{asset('/storage/uploads/images/').'/'.$advertisement->image}}" height="65" width="100"></td>
                @php
                  if ($advertisement->media->status == 1){
                    $current_status = 'Active';
                  } elseif ($advertisement->media->status == 0){
                    $current_status = 'Inactive';
                  } 
                @endphp
                <td>{{ $current_status }}</td>
                <td>{{ $advertisement->media->sort}}</td>                        
                <td>{{ $advertisement->media->admin->username}}</td>
                <td>{{ $advertisement->expired_at}}</td>
                <td>{{ $advertisement->media->updated_at}}</td>
                <td><a href="/advertisements/{{$advertisement->id}}/edit" class="btn btn-success">Edit</td>
                <td>
                <button class="btn btn-danger delete-record" data-toggle="modal" data-target="#deleteModal" data-id="{{$advertisement->id}}" data-url="/advertisements/{{$advertisement->id}}">Delete , {{$advertisement->id}}</button>
                </td>
              </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
      <div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
    </div>

上面的代码是显示我的数据的表视图，每条记录旁边都有一个delete按钮。

<form action="" method="post" id="deleteForm">
    @method('DELETE')
    @csrf 
      <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLongTitle">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">
              Are you sure you want to delete this record?
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="delete" class="btn btn-danger">Delete</button>
            </div>
          </div>
        </div>
      </div>
    </form>

上面的代码是我的模式框代码，带有一个创建delete请求的表单。

下面的代码是处理删除、id传递和操作的javascript：

$(document).ready(function () {
    $('.delete-record').click(function () {
        var url = $(this).attr('data-url');
        $("#deleteForm").attr("action", url);
    });
});

我想让它传递正确的ID。意思是，如果我想删除记录1，它将传递ID 1和记录2，依此类推。

Answer 1

您尝试通过POST方法发送表单，但其中没有post数据，如广告id。

您能展示一下您的web.php路由文件吗？

因为如果这里是POST方法，您应该在表单中添加隐藏输入。

Answer 2

试试这个，

不应该使用url，而应该使用route，

<button class="btn btn-danger delete-record" data-toggle="modal" data-target="#deleteModal" data-id="{{$advertisement->id}}" data-action="{{ route('advertisements.destroy', $advertisement->id) }}">Delete , {{$advertisement->id}}</button>

在JS代码中

$("#deleteForm").attr("action", $(this).data('action'));

如果你不把你的模式代码放在foreach之外，那就把它放在文件的末尾

希望这能有所帮助:)