在Laravel Ajax复选框中更新多个

时间:2019-01-07 15:20:36

标签: laravel

我正在尝试使用laravel和ajax使用复选框更新多行。您能告诉我这是怎么回事吗?谢谢。这是代码:

affectation.blad.php

   <div class="container">
    <h3>PHP Laravel 5.6 - How to update multiple row with checkbox using Ajax? - HDTuto.com</h3>
    @if ($message = Session::get('success'))
    <div class="alert alert-success">
        <p>{{ $message }}</p>
    </div>
    @endif
    <div class="form-group col-md-3  ">
        <select class="form-control" id="app">
                <option v-for="chantier in chantiers" :value="chantier.id" >@{{ chantier.chantier }}</option>
        </select>
    </div>
    <button class="btn btn-success update-all" data-url="">Update All</button>
    <button style="margin: 5px;" class="btn btn-danger btn-xs delete-all" data-url="">Delete All</button>
    <table class="table table-bordered">
        <tr>
            <th><input type="checkbox" id="check_all"></th>
            <th>S.No.</th>
            <th>nom & prenom</th>
            <th>cin</th>
            <th>matricule</th>
            <th>chantier</th>
        </tr>
        @if($salaries->count())
            @foreach($salaries as $key => $salarie)
                <tr id="tr_{{$salarie->id}}">
                    <td><input type="checkbox" class="checkbox" data-id="{{$salarie->id}}"></td>
                    <td>{{ ++$key }}</td>
                    <td>{{ $salarie->nom }} {{ $salarie->nom }}</td>
                    <td>{{ $salarie->cin }}</td>
                    <td>{{ $salarie->matricule }}</td>
                    <td>{{ $salarie->chantier->chantier }}</td>
                </tr>
            @endforeach
        @endif
    </table>
</div>

控制器功能全部更新

 public function updateMultiple(Request $request){
           Salarie::find($request->ids)->Update(['chantier_id'=>request('chantier_id')])->whereIn('id', request('ids'));  
          return response()->json(['status'=>true,'message'=>"Category update successfully."]); 
    }

路线

Route::get('affectation', 'SalarieController@index');
Route::put('update-multiple-category', ['as'=>'category.multiple-update','uses'=>'SalarieController@updateMultiple']);

这是用于全部选中并编辑的javascript:

<script type="text/javascript">
    $(document).ready(function () {
        $('#check_all').on('click', function(e) {
         if($(this).is(':checked',true))  
         {
            $(".checkbox").prop('checked', true);  
         } else {  
            $(".checkbox").prop('checked',false);  
         }  
        });
         $('.checkbox').on('click',function(){
            if($('.checkbox:checked').length == $('.checkbox').length){
                $('#check_all').prop('checked',true);
            }else{
                $('#check_all').prop('checked',false);
            }
         });
        $('.update-all').on('click', function(e) {
            var idsArr = [];  
            $(".checkbox:checked").each(function() {  
                idsArr.push($(this).attr('data-id'));
            });  
            if(idsArr.length <=0)  
            {  
                alert("Please select atleast one record to update.");  
            }  else {  
                if(confirm("Are you sure, you want to update the selected salaries?")){  
                    var strIds = idsArr.join(","); 
                    $.ajax({
                        url: "{{ route('category.multiple-update') }}",
                        type: 'post',
                        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                        data: 'ids='+strIds,
                        success: function (data) {
                            if (data['status']==true) {
                                $(".checkbox:checked").each(function() {  
                                  $(this).parents("tr").children("td:last-child").text($('#app').children("option:selected"). text());
                                });
                                alert(data['message']);
                            } else {
                                alert('Whoops Something went wrong!!');
                            }
                        },
                        error: function (data) {
                            alert(data.responseText);
                        }
                    });
                }  
            }  
        });
        $('[data-toggle=confirmation]').confirmation({
            rootSelector: '[data-toggle=confirmation]',
            onConfirm: function (event, element) {
                element.closest('form').submit();
            }
        });   

    });
</script>

此代码用于用vuejs填充选择选项chantier:

<script src="{{asset('js/Vue.js')}}"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 <!-- Scripts -->
    <script>
        window.Laravel = {!! json_encode([
            'csrfToken' => csrf_token(),
            'url' => url('/')
        ]) !!};
    </script>
<script>
       var app = new Vue({
        el: '#app',
        data: {
            message: 'i am nothing',
            chantiers:[]   
        },
        methods:{

             getChantiers:function(){
                axios.get(window.Laravel.url+'/getchantiers')
                .then(response => {
                    this.chantiers = response.data;
                })
                .catch(error=>{
                    console.log('errrrrreur',error);
                })
             }
            },
        created:function(){
          this.getChantiers();
        }
    });
</script>

当我单击全部更新按钮时,它在图片中给了我这个错误 Error

0 个答案:

没有答案