Laravel inline edit with X-editable

  1. Define Route
  2. Make Model
  3. Make Controller
  4. Make View

1. Define Route

Route::get('contacts','ContactController@index');
Route::post('contacts/update','ContactController@update');

2. Make Model

Table (contacts), 3 fileds: id, name, phone

<?php 

namespace App;

use Illuminate\Database\Eloquent\Model;

class Contact extends Model
{
    public $timestamps = false;
    protected $table = 'contacts';
    protected $fillable = ['name','phone'];
}

3. Make Controller

<?php 

namespace App\Http\Controllers;

use App\Http\Requests;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Contact;


class ContactController extends Controller
{

    public function index()
    {
    	$data = Contact::all();
        return view('admin.contacts.index',compact('data'));
    }

    public function update(Request $request)
    {
    	if($request->ajax()){
         	Contact::find($request->input('pk'))->update([$request->input('name') => $request->input('value')]);
          return response()->json(['success' => true]);
    	}
    }

}

4. Make View

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">

      <title>Laravel</title>
    
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-2.0.3.min.js"></script> 
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

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

   </head>
   <body>
    <div class="container">
      	<div class="col-md-12"><br><br>
          	<div class="panel panel-default">
              <div class="panel-heading">
                 <h3 class="panel-title">Contact List</h3>
              </div>
              <table class="table table-bordered table-striped table-condensed">
                 <tr>
                    <td>NAME</td>
                    <td>PHONE</td>
                 </tr>

                 @foreach($data as $row)
                   <tr>
                      <td>
                        	<a href="#" class="xedit" 
                        	   data-pk="{{$row->id}}"
                        	   data-name="name">
                        	   {{$row->name}}</a>
                      </td>

                      <td>
                        	<a href="#" class="xedit" 
                        	   data-pk="{{$row->id}}"
                        	   data-name="phone">
                        	   {{$row->phone}}</a>
                      </td>
                   </tr>
                 @endforeach

              </table>
          	</div>
      	</div>
    </div>

    <script>
      $(document).ready(function () {
            $.ajaxSetup({
                headers: {
                  'X-CSRF-TOKEN': '{{csrf_token()}}'
               }
            });

            $('.xedit').editable({
               url: '{{url("contacts/update")}}',
               title: 'Update',
               success: function (response, newValue) {
                  console.log('Updated', response)
               }
          });
       })
    </script>
   </body>
</html>