在laravel中使用x-editable更改动态状态

时间:2017-12-12 00:27:40

标签: javascript php laravel x-editable

我有选择按钮,我选择状态作为参赛作品。此状态来自status_id表,并且它不是每个表中的列(它是常规选项)。我想要做的是在x-editable的帮助下更改表格中的 <form action="{{route('updatebyajax', $rating->id)}}" method="post"> {{csrf_field()}} <td class="text-center" style="width:100px;"> <select class="form-control status" name="status_id"> @foreach($statuses as $status) <option id="rating" class="rating" data-url="{{ route('updateratebyajax', $rating->id) }}" data-pk="{{ $rating->id }}" data-type="select" data-placement="right" data-title="Edit Rate" value="{{$status->id}}">{{$status->title}}</option> @endforeach </select> </td> </form> 列,但我不知道如何在JavaScript中获取动态数据。

以下是我目前在评论的索引页面中显示状态的表单,例如:

statuses

所以我需要的是基本上从<a href="#" id="status" data-type="select" data-pk="1" data-url="/post" data-title="Select status"></a> <script> $(function(){ $('#status').editable({ value: 2, source: [ {value: 1, text: 'Active'}, {value: 2, text: 'Blocked'}, {value: 3, text: 'Deleted'} ] }); }); </script> 表中获取信息并通过选择更改。

dropdown

更新

这里要求的是我的表截图:

table image

PS:这是选择按钮的默认示例: sample link

public function updatebyajax(Request $request, $id)
  {
    return Rating::find($id)->update([
      'status_id' => $request->get('status_id'),
    ]);
  }

更新2

查看数据库 reviews

状态表 status

更新3

我只是添加我的控制器方法和路由

控制器

Route::post('/updatebyajax/{id}', 'RatingController@updatebyajax')->name('updatebyajax');

路线

status 200 OK

更新4

我在互联网上混合了几个解决方案,直到我最终在我的网络中获得controller但我的数据库中仍然没有任何变化,这是我当前的代码:

public function updatebyajax(Request $request, $id) { if (request()->ajax()) { $ratings = DB::table('ratings')->select('status_id','id')->where('status_id', '=', $id)->get(); return Response::json( $ratings ); } }

AJAX

<script type="text/javascript"> $(".status").change(function() { $.ajax({ type: "post", // for edit function in laravel url: "{{url('admin/updatebyajax')}}" + '/' + $(this).val(), // getting the id of the data data: {_token: "{{ csrf_token() }}",status: this.value }, //passing the value of the chosen status dataType: 'JSON', success: function (data) { console.log('success'); }, error: function (data) { console.log('error'); } }); }); </script>

FORM

<form action="{{route('updatebyajax', $rating->id)}}" method="post"> {{csrf_field()}} <td class="text-center" style="width:100px;"> <select id="{{ $rating->id }}" class="form-control status" name="status_id"> @foreach($statuses as $status) <option value="{{$status->id}}">{{$status->title}}</option> @endforeach </select> </td> </form>

leih

更新5

目前关于Controller答案,我有这个:

public function updatebyajax(Request $request, $id) { // Note: should probably use a $request->has() wrapper to make sure everything present try { // you can also use the ID as a parameter, but always supplied by x-editable anyway $id = $request->input('pk'); $field = $request->input('name'); $value = $request->input('value'); $rating = Rating::findOrFail($id); $rating->{$field} = $value; $rating->save(); } catch (Exception $e) { return response($e->getMessage(), 400); } }

Route

Route::post('/updatebyajax', 'RatingController@updatebyajax')->name('updatebyajax');

Blade

//Select <a href="#" class="status" data-type="select" data-pk="{{ $rating->id }}" data-value="{{ $rating->status_id }}" data-title="Select status" data-url="{{ route('updatebyajax') }}" ></a> //JS <script type="text/javascript"> $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); $(function() { $('.status').editable({ type:"select", source: [ @foreach($statuses as $status) { value: {{ $status->id }}, text: {{ $status->title }} } @endforeach ], }); }); </script>

$.ajaxSetup({ headers: {....

以下是我得到的结果:

screenshot5

PS:如果我不使用{{1}}并在回答中使用java代码,我将收到此错误

  

解析错误:语法错误,意外','

任何想法??

2 个答案:

答案 0 :(得分:5)

使用带有<select>选项的X-edtiable时,最好查看the documentation,但最好还是查看official examples并查看FAQ for what the back end needs 。您不需要制作自己的表单或使用X-editable编写自己的AJAX请求(这就是重点)。根据您的要求,听起来代码应该与此类似:

RatingController

public function UpdateByAjax(Request $request)
{
    // Note: should probably use a $request->has() wrapper to make sure everything present

    try {
        // you can also use the ID as a parameter, but always supplied by x-editable anyway
        $id = $request->input('pk');
        $field = $request->input('name');
        $value = $request->input('value');

        $rating = Rating::findOrFail($id);
        $rating->{$field} = $value;
        $rating->save();
    } catch (Exception $e) {
        return response($e->getMessage(), 400);
    }

    return response('', 200);
}

路线

Route::post('/updatebyajax', 'RatingController@UpdateByAjax')->name('updatebyajax');

视图

注意:我没有设置下面的CSRF令牌,因为它应该已经全局设置为X-editable(例如,截图中的文本字段),如果需要,或者通过其他机制。

<a
  href="#"
  class="status"
  data-type="select"
  data-pk="{{ $rating->id }}"
  data-name="status_id"
  data-value="{{ $rating->status_id }}"
  data-title="Select status"
  data-url="{{ route('updatebyajax') }}"
></a>
<script>
$(function() {
    // using class not id, since likely used with multiple records
    $('.status').editable({
        // Note: cleaner to format in the controller and render using the @json directive
        source: [
            @foreach($statuses as $status)
                { value: '{{ $status->id }}', text: '{{ $status->title }}' }
                @unless ($loop->last)
                    ,
                @endunless
            @endforeach
        ]
    });
});
</script>

其他参考:请参阅&#39;渲染JSON&#39;在Displaying Data blade documentation

答案 1 :(得分:1)

我认为这对你有用。

  • 将要更改的值的ID放在选择框的ID中
  • jquery中的ajax函数

    $(".status").change(function() {
        $.ajax({
            type: "PUT", // for edit function in laravel 
            url: "{{url('updatebyajax')}}" + '/' + this.id, // getting the id of the data 
            data: {_token: "{{ csrf_token() }}",status: this.value }, //passing the value of the chosen status
            dataType: 'JSON',
            success: function (data) {
                // some kind of alert or console.log to confirm change of status
            },
            error: function (data) {
                // error message
            }
        });
    });
    

希望有所帮助