We will learn how to inline row editing with Laravel in this tutorial. This article will show you a straightforward example of a Laravel ajax inline edit row so that you can learn about Laravel x-editable. You can use this example with Laravel 8 after I demonstrate how to create a straightforward example of inline editing for a table in a Laravel application. We'll show you a list of pupils, and you can use x-editable js to change his name and email address.

Table of Content

  1. Install Laravel
  2. Create Controller
  3. Define Route
  4. Create Blade File

Install Laravel

First, we must install the Laravel 8 application using the following command:

composer create-project --prefer-dist laravel/laravel blog

Create Controller

The following code must be added to StudentController when it is created:

<?php
#app/Http/Controllers/StudentController.php

namespace App\Http\Controllers;

use App\Models\Student;
use Illuminate\Http\Request;

class StudentController extends Controller
{
    public function index()
    {
        $students = Student::get();
        return view('student',compact('students'));
    }

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

Define Route

<?php
#routes/web.php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\StudentController;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('student', [StudentController::class, 'index'])->name('student.index');
Route::post('student', [StudentController::class, 'update'])->name('student.update');

Create Blade File

For the display of student data, blade files must be made. then let's start a file:

resources/views/students.blade.php

<!DOCTYPE html>
<html>
   <head>
        <title>How to inline row editing using Laravel - codesolutionstuff.com</title>
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/jquery-editable/css/jquery-editable.css" rel="stylesheet"/>
        <script>$.fn.poshytip={defaults:null}</script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/jquery-editable/js/jquery-editable-poshytip.min.js"></script>
    </head>
    <body>
        <div class="container">
            <h1>How to inline row editing using Laravel - codesolutionstuff.com</h1>
            <table class="table table-border data-table">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>Age</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($students as $student)
                    <tr>
                        <td>{{ $student->id }}</td>
                        <td>
                            <a href="" class="update_record" data-name="firstname" data-type="text" data-pk="{{ $student->id }}" data-title="Enter Firstname">{{ $student->firstname }}</a>
                        </td>
                        <td>
                            <a href="" class="update_record" data-name="lastname" data-type="text" data-pk="{{ $student->id }}" data-title="Enter Lastname">{{ $student->lastname }}</a>
                        </td>
                        <td>
                            <a href="" class="update_record" data-name="age" data-type="text" data-pk="{{ $student->id }}" data-title="Enter Age">{{ $student->age }}</a>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
   </body>
    <script type="text/javascript">
        $.fn.editable.defaults.mode = 'inline';
    
        $.ajaxSetup({
            headers: {
            'X-CSRF-TOKEN': '{{csrf_token()}}'
            }
        });
    
        $('.update_record').editable({
            url: "{{ route('student.update') }}",
            type: 'text',
            name: 'firstname',
            pk: 1,
            title: 'Enter Field'
        });
    </script>
</html>

Now, run the application

php artisan serve
localhost:8000/student

Recommended Posts

View All

How to Create a Barcode in a Laravel 9 Application


Laravel 9 barcode generator tutorial; This step-by-step tutorial will show you how to create a barcode in your Laravel app from scratch using the milo...

Laravel 9 File Manager Tutorial Example


Learn how to implement a robust file manager in Laravel 9 with our step-by-step tutorial. This example will help you manage and organize files efficie...

Laravel 9 Socialite Login with Facebook Tutorial


In this tutorial, we'll learn how to use the Socialite package in Laravel to login with a Facebook social networking account.

Laravel 9 Capture Image from Webcam and Store in Database


Learn how to capture images from webcam using Laravel 9 and store them in a database. Step-by-step guide with code examples and best practices.

Laravel Full Text Search with Scout


You will have learned how the scout elastic search functions from today's tutorial