使用ajax在单行中切换按钮时,laravel将状态更新为0或1

时间:2018-08-29 03:51:48

标签: javascript php jquery ajax laravel

我是Laravel的新手。切换按钮时,我尝试更新mysql中的'is_active'列,而无需重新加载页面。表格的每一行都有按钮。我还试图通过具有与引导删除确认模态相同的效果来切换按钮时显示弹出消息。

到目前为止,我所做的只是使切换按钮正常工作,但是当我尝试切换按钮时,没有对数据库进行任何更改。我在想是否应该为该复选框使用表格

已更新

这是我的按钮在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

控制台错误 console error

4 个答案:

答案 0 :(得分:1)

html

for

路线

go func() {
  for {
    time.Sleep(time.Duration(5) * time.Minute)
    go ExecuteFunctionA()
    if someConditionIsMet {
      break // nothing leaks in this case
    }
  }
}()

在模型中

<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');

javascript:

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

答案 1 :(得分:0)

您必须在每次单击复选框时都进行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
       })
});

答案 2 :(得分:0)

$(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!'
}

答案 3 :(得分:0)

我喜欢@DejavuGuy的答案中的javascript代码以改善后端代码,我建议您使用类似以下的代码:

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

祝你好运