尝试使用模式弹出窗口删除数据,但未获取所选项目的正确ID

时间:2019-04-22 05:03:42

标签: laravel modal-dialog

我有一个包含许多记录的表视图,并且我希望每个记录都有一个删除按钮,这将提示用户一个模式框以确认删除。我能够使用正确的按钮(从表中查看)来提示模态,但是模态内的按钮(用于确认删除的按钮未通过正确的ID)。例如,我在表中显示了3条记录,其ID为1、2和3。但是,我对表进行编码的方式(将在下面显示代码)使用户可以在其中单击任何删除按钮。所需的记录时,将弹出一个模式框,其中带有“删除(确认)”按钮的ID为所有记录中最新的。在这种情况下,ID为3。我希望它传递正确的ID。这意味着如果我要删除记录1,它将传递ID 1和记录2,依此类推

我尝试研究我对JavaScript所做的错误操作,但似乎还可以,目前似乎无济于事。我尝试将整个模式放入表中,但仍然存在相同的问题...

writeLines()

上面的代码是显示我的数据的表格视图,每条记录旁边都会有一个删除按钮。

<!-- 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>

上面的代码是我的模式框代码,带有创建删除请求的表单。

下面的代码是处理删除以及id和操作传递的javascript:-

<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>

我希望它传递正确的ID。这意味着如果我要删除记录1,它将传递ID 1和记录2,依此类推。

2 个答案:

答案 0 :(得分:0)

您尝试通过POST方法发送表单,但是其中没有诸如广告ID之类的帖子数据。

能否请您显示您的web.php路由文件?

因为这里是POST方法,所以您应该在表单中添加隐藏的输入。

答案 1 :(得分:0)

尝试一下,

您应该使用route代替url,

<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之外,则将其放在文件末尾

希望这会有所帮助:)