javascript - Laravel 5.5 使用模态删除数据

Question

我想使用模态删除数据，我已经获得了要删除的数据的 ID，但是当我在模态中单击删除按钮时，没有任何反应。 请告诉我是否有问题.. 非常感谢

这是我的 Controller

 public function destroy(Request $request)
{
    $applicant = Applicant::where('fk_user_details_id', request('user_detail_id'))->delete();
    $userDetail = UserDetail::where('fk_users_id', request('id'))->delete();
    User::destroy(request('id'));

    return redirect('/applicant_list')->with('success', 'Applicant Removed');
}

这是模态的

<form action="{{route('applicant_delete', 'delete')}}" method="POST" class="remove-record-model">
{{ method_field('delete') }}
{{ csrf_field() }}
<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">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title text-center" id="custom-width-modalLabel">Delete Applicant Record</h4>
            </div>
            <div class="modal-body">
                <h4>You Want You Sure Delete This Record?</h4>
                <input type="hidden", name="applicant_id" id="app_id" value="">
            </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>
        </div>
    </div>
</div>
</form>

这是我的路线:

Route::delete('applicant_delete_modal/{applicants}', 'ApplicantController@destroy')->name('applicant_delete');

这是我的javascript

$('#applicantDeleteModal').on('show.bs.modal', function(e) {
    var $invoker = $(e.relatedTarget);
    var $id = $invoker.attr('data-id');
    var data = $('#data_applicant-' + $id).html();

    data = JSON.parse(data);
    console.log(data);
    $('#app_id').val(data.applicants_id);

})

Answer 1

你的路线:

Route::delete('applicant_delete_modal', 'ApplicantController@destroy')->name('applicant_delete');

在你的 Controller 中:

 public function destroy(Request $request)
{ 
    $applicant_id=$request->input('applicant_id');

    $applicant = Applicant::where('fk_user_details_id',$applicant_id)->delete();
    $userDetail = UserDetail::where('fk_users_id',$applicant_id)->delete();
    User::destroy($applicant_id);
    return redirect('/applicant_list')->with('success', 'Applicant Removed');
}

你的模式应该是:

<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('applicant_delete')}}" 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>
                <h4 class="modal-title text-center" id="custom-width-modalLabel">Delete Applicant Record</h4>
            </div>
            <div class="modal-body">
                <h4>You Want You Sure Delete This Record?</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>

在点击删除按钮时以模式设置数据:

假设您在表中显示数据，那么 将属性 data-userid 赋予删除按钮。

@foreach($users as $user)
<tr>
<td>{{$user->name}}</td>
<td><button class="btn btn-danger deleteUser" data-userid="{{$user->id}}">Delete</button></td>  
</tr>
@endforeach

现在我们在模式中设置数据并显示模式，当用户点击 deleteUser 按钮类 javascript

<script>
$(document).on('click','.deleteUser',function(){
    var userID=$(this).attr('data-userid');
    $('#app_id').val(userID); 
    $('#applicantDeleteModal').modal('show'); 
});
</script>