x-editable on laravel: not seeing changes applied

Question

Giving x-editable a shot with my Laravel 5.1 website. I have a list of text titles listed as table rows. I followed the documentation. I can see the edit form for the text field pop up when I click the title. I change text and submit. Popup disappears as expected, new text shows. But the database was not updated. I made sure to set the data-url to the post action I need. Made sure to add a route for it. Made sure to have a method in my controller to handle the request, update the database and redirect (not sure if the redirect is necessary). Here's a snippet of a single row, I hardcoded title and its id for simplicity.

<a href="#" class="task-editable-name" id="task-editable-name" data-type="textarea" data-url="/task/2/edit" data-title="">Solve x-editable bug</a>


$(document).ready(function() {
    $.fn.editable.defaults.mode = 'popup';     

    $('.task-editable-name').editable({
        placement: 'bottom',
        rows: 3
    });
});


Route::post('/task/{task}/edit', 'TaskController@edit');


public function edit(Request $request, Task $task)
{
    $task->name = $request['value'];
    $task->save();
    return redirect('/tasks');
}

Answer 1

Simple way of using xeditable with laravel

HTML

<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/jqueryui-editable/css/jqueryui-editable.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/jqueryui-editable/js/jqueryui-editable.min.js"></script> 

<div id="_token" class="hidden" data-token="{{ csrf_token() }}"></div>
<a href="#" id="industryName" data-type="text" data-pk="{{ $industry->id }}" data-title="Edit industry">{!! $industry->name !!}</a>

Javascript

    $(document).ready(function() {

     $.fn.editable.defaults.mode = 'inline';

       $.fn.editable.defaults.params = function (params) 
       {
        params._token = $("#_token").data("token");
        return params;
       };

     $('#industryName').editable({
                validate: function(value) {
                                            if($.trim(value) == '') 
                                                return 'Value is required.';
                                            },
                type: 'text',
                url:'/updateIndustry',   
                send:'always',
                ajaxOptions: {
                dataType: 'json'
                }

                } );
 } );

laravel route

Route::post('/updateIndustry',  'SettingsController@updateIndustry');

laravel controller

public function updatePosition(Request $request)
    {
        $id= $request->pk;
        $position = $request->value;

        $count = DB::table('designations')->whereRAW("position LIKE '%".$position."%'")->where('id','!=',$id)->count();
        if($count)
            echo "Similar position exists.";

        else
        {
            DB::table('designations')->where('id',$id)->update(['position' => $position]);
            echo "1";
        }
   } 

Answer 2

I solved my issue. I had to do three things:

add this to the js that handles the x-editable:

$.fn.editable.defaults.send = "always";

include the following meta and script per laravel documentation:

<meta name="csrf-token" content="{{ csrf_token() }}" />
<script type="text/javascript">
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
</script>

access the x-editable value directly from $request in my controller:

public function edit(Request $request, Task $task)
{
    $task->name = $request->value; // instead of $request->input('value')
    $task->save();
}

Thanks guys for your replies, and Hope this helps someone out there!

Answer 3

I'm using Laravel 5.1 with x-editable as well and here is how I achieve my updates so that you could possibly find some use to your issue:

Link:

<div class="myupdate">
    <a data-name="database_column_name" href="#" data-type="text" data-url="update-row" data-pk="1" class="pUpdate" data-title=""></a>
</div>

Route:

Route::post('update-row', 'HomeController@updateRow');

Controller:

public function updateRow(Request $request)
{
    // get database row id
    $pk = $request->input('pk');

    // get column name
    $col = $request->input('name');

    // get new value
    $value = $request->input('value');

    // get id row of line item and edit/save
    if ($finditem = Items::where('id', $pk)->update([$col => $value]))
    {
        return \Response::json(array('status' => 1));
    }
    else
    {
        return \Response::json(array('status' => 0));
    }
}

jQuery:

$(document).ready(function(){
    $.fn.editable.defaults.mode = 'popup';
    $('.myupdate').editable({
        selector: '.pUpdate',
        validate: function(value) {
            if($.trim(value) == '') {
                return 'Value is required.';
            }
        },
        placement: 'top', 
        send:'always',
        ajaxOptions: {
            dataType: 'json'
        }
    });
 });

As James stated, did you check if the column you're trying to update is listed under the $fillable array in your table model?

Database Table Model:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Items extends Model {

    protected $connection = 'mysql';
    protected $primaryKey = 'id';
    protected $table = 'items_table';
    protected $fillable = array(
        'name',
        'description',
        'quantity'
    );

    public $timestamps = true;

}

Can you open up your browsers developer tools to monitor if there's any errors showing up during all this?

I find it weird x-editable would even act as if nothing is wrong and not display an error right then and there.

The above works for me so once you adjust yours I'm confident you should get it going.