Laravel inline edit with X-editable
- Define Route
- Make Model
- Make Controller
- 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>