Laravel Ajax Request using X-editable bootstrap Plugin Tutorial

Laravel 8 , Laravel 7 , Laravel , Laravel 6

Nicesnippets

436

25-09-2021


Laravel Ajax Request using X-editable bootstrap Plugin Tutorial

Hi Artisan,

Today,In this article I will learn you how to integrate laravel Ajax request using X-editable bootstrap Plugin Example in laravel application. laravel x-editable example in our laravel application.

Here,i will give you a simple and easy example how to use X-editable in laravel simply follow my all steps.

Step 1 : Install Laravel App


In this step, You can install laravel fresh app. So open terminal and put the bellow command.

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

Step 2 : Setup Database Configuration

After successfully install laravel app next we configure databse setup. We will open ".env" file and change the database name, username and password in the env file.

.env

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=Enter_Your_Database_Name

DB_USERNAME=Enter_Your_Database_Username

DB_PASSWORD=Enter_Your_Database_Password

Step 3 : Create Route

now, we require to create route for XeditableController in laravel application. so open your "routes/web.php" file and add following route.

routes/web.php

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\XeditableController;

Route::get('home',[XeditableController::class ,'index'])->name('home');

Route::post('editable/update',[XeditableController::class ,'update'])->name('editable.update');

Step 4 : Create Controler

Here this fourth step now we should create new controller as XeditableController. So run bellow command and create new controller.

php artisan make:controller XeditableController

After successfully run above command . So, let's copy bellow code and put on XeditableController.php file.

app/http/controller/XeditableController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\User;

class XeditableController extends Controller

{

/**

* Write Your Code..

*

* @return string

*/

public function index()

{

$data = User::take(5)->get();

return view('index',compact('data'));

}

/**

* Write Your Code..

*

* @return string

*/

public function update(Request $request)

{

if($request->ajax()){

User::find($request->input('pk'))->update([$request->input('name') => $request->input('value')]);

return response()->json(['success' => true]);

}

}

}

Step 5 : Create Blade File

In last step. In this step we have to engender blade file.So finally you have to create following index.blde.php file and put bellow code:

resources/views/index.blade.php

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="csrf-token" content="{{ csrf_token() }}">

<title>Laravel X-editable Example Tutorial - NiceSnippets.com</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>

<style type="text/css" media="screen">

body{

background: #000;

}

.wrapper{

background: #fff;

margin-top: 70px;

width: 700px;

}

</style>

</head>

<body>

<div class="container wrapper">

<div class="row">

<div class="col-md-12">

<div class="card">

<div class="card-header">

<h4>Laravel X-editable Example Tutorial - NiceSnippets.com</h4>

</div>

<div class="card-body">

<table class="table table-bordered table-striped table-condensed">

<tr>

<td>Name</td>

<td>Email</td>

</tr>

@foreach($data as $row)

<tr>

<td>

<a href="#" class="xedit" data-pk="{{$row->id}}" data-type="text" data-title="Enter name" data-name="name"> {{$row->name}}</a>

</td>

<td>

<a href="#" class="xedit" data-pk="{{$row->id}}" data-type="email" data-title="Enter Email" data-name="email"> {{$row->email}}</a>

</td>

</tr>

@endforeach

</table>

</div>

</div>

</div>

</div>

</div>

<script>

$(document).ready(function () {

$.ajaxSetup({

headers: {

'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

}

});

$('.xedit').editable({

url: '{{route('editable.update')}}',

title: 'Update',

type: 'text',

pk: 1,

name: 'name',

success: function (response, newValue) {

console.log('Updated', response)

}

});

});

</script>

</body>

</html>

Now we are ready to run our example so run bellow command for quick run:

php artisan serve

Now you can open bellow URL on your browser:

http://localhost:8000/home

Output:

I hope it help you...


Recommended Posts