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

Posted 2023-05-08

【中文标题】在 laravel 中使用 x-editable 更改动态状态

【英文标题】：Change dynamic status with x-editable in laravel

【发布时间】：2018-05-25 14:33:03

【问题描述】：

我有选择按钮，我可以在其中为我的条目选择状态。此状态来自statuses 表，它不是每个表中的列（它是常规选项）。我想做的是在x-editable 的帮助下更改表中的status_id 列，但我不知道如何在javascript 中获取我的动态数据。

这是我当前的表单，用于在我的评论的索引页面中显示状态，例如：

 <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>

所以我需要的基本上是从statuses 表中获取信息并通过选择进行更改。

更新

这里要求的是我的表格截图：

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

<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>

更新 2

审查数据库

状态表

更新 3

我只是添加我的控制器方法和路由以防万一

控制器

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

路线

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

更新 4

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

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>

更新 5

关于leih 的回答，目前我有这个：

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>

这是我得到的结果：

PS：如果我不使用 $.ajaxSetup( headers: .... 并在回答中使用 java 代码，我会收到此错误

解析错误：语法错误，意外','

有什么想法吗？？

【问题讨论】：

你现在做了什么？

@shukshin.ivan 到目前为止你在我的问题中看到的，这就是我所做的一切。

需要更多信息。以示例显示表格

@GauravGupta 的例子是什么？如果我有使用 x-editable 进行动态值更改的示例，我不会提出这个问题！ Ps：我会附上我的表格截图）

db 用示例数据表它

【参考方案1】：

使用带有<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 可编辑（例如屏幕截图中的文本字段），或者通过其他机制。

<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>

其他参考：请参阅Displaying Data blade documentation 中的“渲染 JSON”

【讨论】：

您好，感谢您的解决方案，我在 js 源代码部分 Parse error: syntax error, unexpected ',' 中遇到此错误，我真的不确定您用于刀片的 a 标签，因为我需要下拉菜单（但我如果我可以加载页面，应该看看它的样子！）

@mafortis 语法错误可能来自我缺少引号，将很快更新答案。理想情况下，如前所述，它应该从控制器格式化，但没有显示您如何加载$statuses 的控制器方法，我不想猜测太多。 a 标记将在只读模式下显示为文本（与 x-editable 的文本种类相同），在编辑模式下将显示为 <select>。

嘿伙计，新年快乐。我又回来工作了，这就是我所拥有的ibb.co/jKpmsG | ibb.co/npCNXG 当我点击检查按钮时，我会弹出错误。 PS：所有代码都是您当前答案中的代码“我没有改变）。

@mafortis 我们如何discuss this in chat？

【参考方案2】：

我认为这对你有用。

将要更改的值的 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
        
    );
);

希望对你有帮助

【讨论】：

感谢代码，但它不起作用，首先我将 id 更改为 class 以使所有字段都能正常工作，而不仅仅是最新条目，这是我使用的代码：` $(" .status").change(function() $.ajax( type: "PUT", url: "url('updatebyajax')" + '/' + this.id, data: _token: “ csrf_token() ”，状态：this.value ，数据类型：'JSON'，成功：函数（数据） .. ，..console.log('error'); ); );`

如果你能根据我提交的表格给我完整的代码库，它会起作用。

对此感到抱歉。我只是在我的旧代码源中刮掉了它。

成功：函数（数据） console.log('success'); , 错误：函数（数据） console.log('error');

你能告诉我你控制台中的错误吗？他们的错误是网络中的 500 还是您的控制台中的任何错误？