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

Tags

Recommended Posts

View All

Laravel Dropbox api File Upload example using league/flysystem-dropbox

Learn how to upload files to Dropbox using Laravel and league/flysystem-dropbox in this step-by-step tutorial. Improve your Laravel skills today!
Read More

Laravel 8/7/6 Google ReCaptcha v2 Form Validation

In form validation, Laravel 8,7,6 uses Google v2 Captcha/Re-Captcha. You will learn how to add Google v2 ReCaptcha form validation to a Laravel form i...
Read More

How To Use WYSIHTML5 Editor In Laravel 9?

wysihtml5 editor example, laravel wysihtml5 editor example, wysihtml5 laravel, wysihtml5 editor example in laravel, wysihtml5 with laravel, wysihtml5...
Read More

Install and Use Font Awesome Icons in Laravel 9

laravel 9 install font awesome icons example,how to install font awesome icons in laravel 9,install font awesome icons example,how to install font awe...
Read More

Laravel 9 generate RSS Feed Tutorial With Example

Learn how to generate RSS feeds in Laravel 9 with our easy-to-follow tutorial. Get step-by-step instructions and real-world examples. Start today!
Read More