javascript - Laravel 和 Javascript - 从数据库中删除多行

Question

我正在尝试使用复选框和 javascript 从数据库中删除几个项目。我已经工作并删除了行的代码，但是我收到了一个错误，该错误实际上阻止了页面刷新，从而显示了更新结果。

这是我所拥有的：

路线

Route::delete('/admin/videos/deleteselected', 'VideosController@deleteAllSelected')->name('videos.deleteAllSelected');

控制器

public function deleteAllSelected(Request $request)
{
    $ids = $request->ids;
    Video::where('id',explode(",",$ids))->delete();

    //store status message
    Session::flash('success_msg', 'Video(s) deleted successfully!');

    return redirect()->route('videos.index');
}

看法

<!-- videos list -->
    @if(!empty($videos))
        <div class="row text-center">
            <div>
                {{ $videos->links() }}
            </div>
        </div>

        <div class="content table-responsive table-full-width">
            <table class="table table-striped">
                <button style="margin-bottom: 10px" class="btn btn-primary delete_all" data-url="{{ route('videos.deleteAllSelected') }}">Delete All Selected</button>
                <thead>
                    <th>ID</th>
                    <th><input type="checkbox" id="master"></th>
                    <th>Thumb</th>
                    <th>Duration</th>
                    <th>Manage</th>
                </thead>
                <!-- Table Body -->
                <tbody>
                @foreach($videos as $video)
                    <tr id="tr_{{$video->id}}">

                        <td>
                            <div>
                                {{$video->id}}
                            </div>
                        </td>

                        <td>
                            <div class="text-center">
                                <input type="checkbox" class="sub_chk" data-id="{{$video->id}}">
                            </div>
                        </td>

                        <td>
                            <div>
                                <img class="img-thumbnail" src="{{$video->imgurl}}" alt="video thumbnail">
                            </div>
                        </td>

                        <td>
                            <div>
                                {{$video->duration}}
                            </div>
                        </td>

                        <td>
                            <div><a href="{{ route('videos.details', $video->id) }}" class="btn btn-block btn-sm btn-info"><i class="fa fa-info"></i> Details</a></div>
                            <div><a href="{{ route('videos.edit', $video->id) }}" class="btn btn-block btn-sm btn-success"><i class="fa fa-pencil"></i> Edit</a></div>
                            <div><a href="{{ route('videos.delete', $video->id) }}" class="btn btn-block btn-sm btn-danger" onclick="return confirm('Are you sure to delete?')"><i class="fa fa-trash"></i> Delete</a></div>
                        </td>

                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>

    <div class="row text-center">
        {{ $videos->links() }}
    </div>

@endif

Javascript代码

$(document).ready(function () {


    $('#master').on('click', function(e) {
     if($(this).is(':checked',true))  
     {
        $(".sub_chk").prop('checked', true);  
     } else {  
        $(".sub_chk").prop('checked',false);  
     }  
    });


    $('.delete_all').on('click', function(e) {


        var allVals = [];  
        $(".sub_chk:checked").each(function() {  
            allVals.push($(this).attr('data-id'));
        });  


        if(allVals.length <=0)  
        {  
            alert("Please select videos.");  
        }  else {  


            var check = confirm("Are you sure you want to delete this ?");  
            if(check == true){  


                var join_selected_values = allVals.join(","); 


                $.ajax({
                    url: $(this).data('url'),
                    type: 'DELETE',
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                    data: 'ids='+join_selected_values,
                    success: function (data) {
                        if (data['success']) {
                            $(".sub_chk:checked").each(function() {  
                                $(this).parents("tr").remove();
                            });
                            alert(data['success']);
                        } else if (data['error']) {
                            alert(data['error']);
                        } else {
                            alert('Whoops Something went wrong!!');
                        }
                    },
                    error: function (data) {
                        alert(data.responseText);
                    }
                });


              $.each(allVals, function( index, value ) {
                  $('table tr').filter("[data-row-id='" + value + "']").remove();
              });
            }  
        }  
    });


    $('[data-toggle=confirmation]').confirmation({
        rootSelector: '[data-toggle=confirmation]',
        onConfirm: function (event, element) {
            element.trigger('confirm');
        }
    });


    $(document).on('confirm', function (e) {
        var ele = e.target;
        e.preventDefault();


        $.ajax({
            url: ele.href,
            type: 'DELETE',
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            success: function (data) {
                if (data['success']) {
                    $("#" + data['tr']).slideUp("slow");
                    alert(data['success']);
                } else if (data['error']) {
                    alert(data['error']);
                } else {
                    alert('Whoops Something went wrong!!');
                }
            },
            error: function (data) {
                alert(data.responseText);
            }
        });


        return false;
    });
});

我得到的错误实际上无法复制它，因为它出现在 javascript 警报中。但请找到它的图片：

标签： javascriptdatabaselaravel