如何获得模态确认删除使用laravel显示数据？

Question

当我试图删除其中一行（数据之一）时，我想从我的表或我的数据库中获取值 id。我试图扩展我的endforeach，它只是让 html 变得如此奇怪。嗯，更多解释这里是我的图片。

图像确认模态

是的，我只是想确认用户是否单击了删除按钮，它会显示一个模式“你确定要删除这个吗？”。所以，问题是，我不知道如何获取值id 当我从第二行删除按钮单击下一个删除按钮，从第三行删除按钮单击删除按钮，从第四行删除按钮单击删除按钮（如果下面有一行）等等。

这是我的模态代码

模态删除

<div class="m-2">
<div  class="modal fade h-50" id="modalDelete" tabindex="-1" role="dialog" aria- 
    labelledby="deleteModal" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModal">Change Department Status</h5>
            </div>
            <div class="modal-body">
                <p id="question">Are You sure want to delete {{$ideaprogram[0]->showidea_id}}?</p>
            </div>
            <div class="modal-footer">
                <a id="deleteData">
                    <button type="button" class="btn btn-success">Yes</button>
                </a>
                <button type="button" class="btn btn-danger" data-dismiss="modal">No</button>
            </div>
        </div>
    </div>
</div>
</div>

我只是像这样设置索引$ideaprogram[0]->showidea_id 的值。使用零 (0) 硬代码。例如，如果我想删除下一个（下一个索引）为 1，我如何将它的值更改为 1，或者如果我想删除下一个索引，我如何将它的值更改为 2，依此类推。基本上我希望该功能更像是当我从某行单击删除按钮时，它将显示该行的 id 程序。我目前正在使用 laravel 和 php。我不知道如何实现它。有人可以帮我吗？

Answer 1

在删除按钮单击时以模态设置数据：

假设您在 table 中显示数据，然后将属性 data-programid 赋予删除按钮。

@foreach($programs as $program)
<tr>
<td>{{$program->name}}</td>
<td><button class="btn btn-danger deleteProgram" data-programid="{{$program->id}}">Delete</button></td>  
</tr>
@endforeach

现在我们在模态中设置数据并显示模态，当用户单击 deleteProgram 按钮类 javascript

<script>
$(document).on('click','.deleteProgram',function(){
    var programID=$(this).attr('data-programid');
    $('#app_id').val(programID); 
    $('#question').append(programID+' ?');
    $('#applicantDeleteModal').modal('show'); 
});
</script>

你的模态：

<div id="applicantDeleteModal" class="modal modal-danger fade" tabindex="-1" role="dialog" aria-labelledby="custom-width-modalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog" style="width:55%;">
        <div class="modal-content">
             <form action="{{route()}}" method="POST" class="remove-record-model">
               {{ method_field('delete') }}
               {{ csrf_field() }}

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h5 class="modal-title text-center" id="custom-width-modalLabel">Change Department Status</h5>
            </div>
            <div class="modal-body">
                <h4 id="question">Are You sure want to delete </h4>
                <input type="hidden" name="applicant_id" id="app_id">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-danger waves-effect remove-data-from-delete-form">Delete</button>
            </div>

             </form>
        </div>
    </div>
</div>

Answer 2

我一直都这样用。

<td>

    <ul style="list-style-type: none;">
          <li><i class="fa fa-edit"></i> <a href="{{ url('') }}/en/admin/role/edit/{{ $role->id }}"> Edit </a></li>
          <li><i class="fa fa-trash"></i>
          <button data-toggle="modal" data-target="#modal{{ $role->id }}">Delete</button>
          </li>
    </ul>

</td>

<!-- Modal -->
<div class="modal fade" id="modal{{ $role->id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
          <div class="modal-header bg-danger">
              <h5 class="modal-title" id="exampleModalLabel">You are about to delete the role {{ $role->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 text-danger">Once you delete, it cannot be undone.
          </div>
          <div class="modal-footer">
               <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
               <form method="POST" action="{{ url('') }}/en/admin/role/delete/{{ $role->id }}">
                    {{ method_field('delete') }}
                    {{ csrf_field() }}
                    <button type="submit" class="btn btn-danger">Confirm</button>
               </form>
          </div>
       </div>
    </div>
 </div>

Answer 3

实际上，我想要一个答案，给我一个更像 A.A Noman 的解决方案，因为它对一小行代码有好处，所以我认为这是可能的，但是在尝试了建议的解决方案之后，并没有给我我想要的，所以我想我可以这样解决。

script.js

function deleteModal(data){
     document.getElementById('question').innerHTML = `Are you sure to delete ${data.showidea_id} ?`;
     document.getElementById('deleteData').setAttribute('href',`/program_idea/${data.showidea_id}/deleteData`);
     $('#modalDelete').modal('show'); 
}

而我的 HTML 是这样的

index.blade.php

@foreach($ideaprogram as $dataload)
        <tr>
            <td class="text-center">
                <button type="button" class="btn btn-danger btn-sm deleteProgram" data-toggle="modal" 
                       onclick="deleteModal({{$dataload}})">
                    <i class="far fa-trash-alt"></i>
                </button>
        </tr>
 @endforeach

感谢所有回答我问题的人