Laravel Ajax Request using X-editable bootstrap Plugin Example

January 14, 2018 | Category : Laravel 5.5 Laravel 5 Ajax JQuery Plugin JQuery Bootstrap Laravel PHP

Hi Developer,

In this tutorial, i will let you know how to save data using ajax request with X-editable bootstrap plugin in laravel 5 application. you can simple call ajax request with z-editable bootstrap and update data using ajax request.

I was thinking to share something new thing with laravel 5 application and i used before X-editable bootstrap plugin. it's amazing for ajax. really nice layout and simple way to use. we can also use x-editable plugin without bootstrap. so don't worry about it to use. i make simple and easy example for laravel application. so you can easily understand and use it with other application too.

So, let's just follow few bellow step and you will get layout like as bellow screen shot, at the end of all step. let's follow:

Preview:

Add Routes: routes/web.php

Route::get('/get-users', 'HomeController@getUsers');

Route::post('/update-user', 'HomeController@updateUser');

Add Methods: app/Http/Controllers/HomeController.php

<?php


namespace App\Http\Controllers;


use Illuminate\Http\Request;

use App\User;


class HomeController extends Controller

{

/**

* Create a new controller instance.

*

* @return void

*/

public function getUsers()

{

$users = User::all();

return view('users',compact('users'));

}


/**

* Create a new controller instance.

*

* @return void

*/

public function updateUser(Request $request)

{

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

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

}

}

View File: resources/views/users.blade.php

<!DOCTYPE html>

<html>

<head>

<title>Laravel Ajax Request using X-editable bootstrap Plugin Example</title>


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

<!-- Latest compiled and minified CSS -->

<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>


</head>


<body>

<div class="container">

<h3>Laravel Ajax Request using X-editable bootstrap Plugin Example</h3>

<table class="table table-bordered">

<tr>

<th>Name</th>

<th>Email</th>

<th width="100px">Action</th>

</tr>

@foreach($users as $user)

<tr>

<td><a href="" class="update" data-name="name" data-type="text" data-pk="{{ $user->id }}" data-title="Enter name">{{ $user->name }}</a></td>

<td><a href="" class="update" data-name="email" data-type="email" data-pk="{{ $user->id }}" data-title="Enter email">{{ $user->email }}</a></td>

<td><button class="btn btn-danger btn-sm">Delete</button></td>

</tr>

@endforeach

</table>

</div>

</body>


<script type="text/javascript">


$.ajaxSetup({

headers: {

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

}

});


$('.update').editable({

url: '/update-user',

type: 'text',

pk: 1,

name: 'name',

title: 'Enter name'

});


</script>

</html>

Now you can run above example and let's see :)

I hope you found you solution...