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

时间:2020-05-02 15:49:03

标签: php laravel

当我尝试删除行之一(数据之一)时,我想从表或数据库中获取值id。我试图扩展endforeach,但这只是使html变得怪异。嗯,这里有更多的解释是我的照片。

图像确认模式

enter image description here

是的,我只是想确认用户是否单击了删除按钮,它会显示一个模态“您确定要删除它吗?”。因此,问题是,我不知道如何获取该值当我单击第二行删除按钮中的下一个删除按钮,第三行删除按钮中的删除按钮,第四行删除按钮中的删除按钮(如果有下面的行)时,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。我不知道该如何实现。有人可以帮我吗?

3 个答案:

答案 0 :(得分:1)

在删除按钮上单击以模态设置数据:

假设您正在表中显示数据,然后为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>

答案 1 :(得分:1)

我一直这样使用。

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

答案 2 :(得分:0)

实际上,我想要一个能给我更多类似于AA 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

无论如何,感谢大家回答我的问题