Обновление статуса laravel до 0 или 1, когда кнопка переключается в одной строке с помощью ajax

Question

Я относительно новичок в Laravel. Я пытаюсь обновить столбец is_active в mysql, когда кнопка переключается без перезагрузки страницы. Каждая строка таблицы будет иметь кнопку. Я также пытаюсь отобразить всплывающее сообщение, когда кнопка переключается с тем же эффектом, что и модальное подтверждение подтверждения начальной загрузки.

То, что у меня есть до сих пор, заставляет работать кнопку переключения, но когда я попытался переключить кнопку, в базу данных не было внесено никаких изменений. Я думаю, должен ли я использовать форму для флажка

ОБНОВЛЕНО

Вот так выглядит моя кнопка в html

@foreach($system_functions as $function)
    <input type="hidden" id="id_input" value="{{$function->id}}" >
    @if($function->group_id == 1)
        <tr>
            <td>{!! $function->name !!}</td>
            <td><input class="toggle_status" type="checkbox" @if($function->is_active) checked @endif id="is_active" name="is_active" value="on" data-toggle="toggle"></td>
        </tr>
    @endif
@endforeach

У меня также есть функция обновления в контроллере

public function update(Request $request, $id)
{
    $function=SystemFunction::where('id',$id)->first();
    if($request->get('is_active')==='on'){
        $is_active=1;
    } else{
        $is_active=0;
    }
    $function->update([
        'is_active' => $is_active
    ]);
    return redirect('admin/system-functions')->with('status','SUCCESSFUL');
}

и я звоню по этому маршруту

Route::group(array('prefix' => 'admin', 'namespace' => 'Admin', 'middleware' => 'staff'), function () {
    Route::post('/system-functions', 'SystemFunctionController@update')->name('system-functions');
}

и мой JS выглядит так на мой взгляд

@section('script')
<script type="text/javascript">
    $(document).ajaxStop(function () {
        $('.toggle_status').on('click', function (e) {
            var is_checked = false
            if ($(this).is(':checked')) {
                is_checked = true;
            }
            $.ajax({
                type: 'POST',
                url: '{{ route('admin.system-functions') }}', // use proper route to system-functions here
                async: true,
                data: {
                    is_checked: is_checked,
                    id: {{ $function->id }}
                },
                success: function (result) {
                    alert('Toggle successfull'); // use proper alert message here
                    e.stopImmediatePropagation();
                    return false;
                }
            });
        });
    });
</script>
@endsection

ошибка консоли ошибка консоли

Answer 1

Мне нравится javascript код Ответов @ DejavuGuy для улучшения внутреннего кода. Я хотел бы предложить вам использовать что-то вроде этого:

public function update($value,$id)
{
    $function=SystemFunction::where('id',$id)->first();
    $function->is_active = !$function->is_active;
    $function->save();
    echo 'Successfully!'
}

Удачи

Answer 2

$(document).ready(function() {
    $("#is_active").click(function() {
        var checkBoxe = $("#is_active");
        checkBoxe.prop("checked", !checkBoxe.prop("checked"));
    });  

    var checkedValue = $('#is_active').val();
    var id = $('#id_input').val();

        var xhr = new XMLHttpRequest();
        xhr.open("GET", '{{url('system-functions')}}'+'/'+checkedValue+'/'+id, true);
        xhr.setRequestHeader('Content-Type', '');
        xhr.send();
        xhr.onload = function() {
            alert(this.responseText);
        }              
});

и ваш маршрут здесь ...

Route::get('/system-functions/{value}/{id}', 'SystemFunctionController@update');

ваш серверный метод здесь ...

public function update($value,$id)
{
    $function=SystemFunction::where('id',$id)->first();
    if($value==='checked'){
        $is_active=1;
    } else{
        $is_active=0;
    }
    $function->update([
        'is_active' => $is_active
    ]);
    echo 'Successfully!'
}

Answer 3

HTML

<tr>
    <td>{!! $function->id !!}</td>
    <td>{!! $function->name !!}</td>
    <td><input class="togglefunction" type="checkbox" @if($function->is_active) checked @endif id="is_active" name="is_active"  value="on" data-toggle="toggle" data-fid="{{$function->id}}"></td>
 </tr>

Маршрут

Route::post('/system-functions', 'SystemFunctionController@update')->name('update-system-function');

В модели

public function toggleIsActive()
     {
            $this->is_active= !$this->is_active;
            return $this;
     }

затем используйте как

public function update(Request $request)
{
    $function=SystemFunction::where('id',$request->id)->first();
    $function->toggleIsActive()->save();
    return redirect('admin/system-functions')->with('status','successful');
}

JavaScript:

$('.togglefunction').on('click',function(){  
    //send value by ajax to server
    $.ajax({
        url:'{{route('update-system-function')}}',
        type:'GET',
        data:"{id:$(this).data('fid')}"
    }).done(function(response) {
      //success
       }).fail(function(error){
      //failure
       })
});

Answer 4

Вы должны будете делать ajax-вызов при каждом нажатии на флажок, чтобы обновить запись базы данных.

Ваш код js будет таким:

$('#somecheckbox').on('click',function(){
    //check the checkbox status
    var is_checked  = false
    if($(this).is(':checked')){
       is_checked = true;
    }
    //send value by ajax to server
    $.ajax({
        url:'url_here',
        type:'GET',
        data:"{is_checked:is_checked}"
    }).done(function(response) {
      //success
       }).fail(function(error){
      //failure
       })
});