Laravel inline edit by X-editable

Laravel inline edit by X-editable

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.

 

Laravel inline edit with X-editable

  1. Define Route
  2. Include jQuery X-Editable
  3. Make Model
  4. Make Controller
  5. Make View

laravel-inline-edit-x-editable.png

1. Define Route

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');

 

2. Include jQuery X-Editable

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>

 

3. Make Model

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'];
}

 

4. Make Controller

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]);
    	}
    }

}

 

5. Make View

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.

 

Share on

Related Post


DB Seeder - A database seeder application

Laravel Barcode generation tutorial

Laravel Validation Cheat Sheet

PEST - Make Laravel test easier

Laravel Google reCaptcha without package

Speed Up Laravel website - Step by Step