The inline editing feature is a great user experience for the web application. It makes your users happy to use your application. There are so many ways to make inline editing but most of the ways are not simple to do for a beginner. In this term, jQuery X-editable plugin made it so easy but you might be looking for how you can use it in your Laravel application, right? Okay, In this post, I'll show you a clear step by step tutorial for how to use jQuery X-editable in your Laravel application for making inline table editing feature. This post is completely Laravel version independent, so you can do exactly the same thing on whatever Laravel version you are using now. Let's start.
For making inline table editing, we'll define 2 routes only. One for returning a view with the list of data showing on the table as well as and another route for updating data by Ajax request with the help of jQuery x-editable.
Route::get('contacts','ContactController@index');
Route::post('contacts/update','ContactController@update');
Now include these CDN link of jQuery X-editable in your layout file. This plugin has jQuery, Bootstrap 3 dependency so make sure you have included those dependencies first.
<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>
Our table (contacts) structure is simple and it has 3 fields 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'];
}
Make a contact controller for returning list of data and update data by x-editable.
<?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]);
}
}
}
Now make a view in resources/views/admin/contacts directory with the name index.blade.php and render the table data in the HTML table.
@extends('admin.template')
@section('content')
<div class="container">
<div class="col-md-12">
<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>
@endsection
Explanation: In foreach loop, we just rendered the table data as well as with anchor tag each we want to inline edit. data-pk for sending the primary key data for mentioning which records we are going to edit and the data-name for which field's data will be updated. That's it! Rest of the things will handle the jQuery editable. That's cool, right?.
Hope this post, will help you to make you won inline table editing in your Laravel application. If this one is helpful, please share this post with others and don't forget to subscribe our newsletter subscription to get useful Laravel article to supercharge your Laravel knowledge.
