Change dynamic status with x-editable in laravel

Question

I have a select button where I select the status for my posts. This state comes from the statuses table, and it is not a column in each table (this is a common variant). I want to change the status_id columns in my tables using x-editable , but I don't know how to get my dynamic data in JavaScript.

Here is my current form for displaying statuses on the index page of my reviews, for example:

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

So I basically need to get information from the statuses table and change as statuses .

Update

As requested, here is a screenshot:

PS: the default selection is used here: link sample

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

Update 2

Overview Database

Status table

Update 3

I just add my controller method and route in case

controller

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

way

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

UPDATE 4

I mixed several solutions on the Internet until I finally got the status 200 OK on my network, but nothing changes in my database, here are my current codes:

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> 

UPDATE 5

Regarding leih answer, I currently have the following:

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> 

And here is the result:

PS: If I do not use $.ajaxSetup({ headers: {.... and use java code in response, I will get this error

Parse error: syntax error, unexpected ','

Any idea?

Answer 1

When using X-edtiable with the <select> option, it’s useful to look at the documentation , but it’s better to look at official examples and check frequently asked questions about what the back end requires , you don’t need to create your own forms or write your own AJAX requests with X-editable ( that everything indicates). Based on what you ask, it looks like the code should look something like this:

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

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

View

Note. I do not set the CSRF token below, because it must be set globally for X-editable (for example, for text fields in the screenshot), if required, or through some other mechanism.

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

Additional link: see "Rendering JSON" in Displaying Data Blades Documentation

Answer 2

I think that would be useful for you.

• Put the identifier of the value you want to change in the identifier of the selection window

• Ajax function in jQuery

   $(".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 } }); }); 

Hope this helps