10-Jan-2024
.
Admin
Hello Dev,
Today, I will let you know an example of how to make Ajax put a request in Laravel 10. you'll learn ajax formdata and put fails. it's a simple example of Laravel 10 on how to set up an Ajax request tutorial. I would like to show you fix Laravel's Ajax put/patch issue.
In this example, we will create a list of users with an 'Edit' button. When the 'Edit' button is clicked, a modal window containing input fields for name and email will open. Subsequently, we will save the data using the AJAX PUT method. You can edit data using jQuery AJAX GET in Laravel 6, Laravel 7, Laravel 8, Laravel 9, and Laravel 10 versions as well.
Let's follow the below steps.
Preview
Step 1: Install Laravel
This step is optional; however, if you have not yet created the Laravel app, feel free to execute the following command.
composer create-project laravel/laravel example-app
Step 2: Create Dummy Users
Here, we will create some dummy records in the 'users' table and import them.
Now, let's execute the following commands.
Create Dummy Records.
php artisan tinker
User::factory()->count(20)->create()
Step 3: Create UserController Controller
At this point, we should create a new controller named UserController. In this controller, we will add the index and show methods, which will return filtered user data.
Let's update the code in your controller file with the following changes.
app/Http/Controllers/UserController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
class UserController extends Controller
{
/**
* Write code on Method
*
* @return response()
*/
public function index()
{
$users = User::paginate(10);
return view('users', compact('users'));
}
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function update(Request $request, $id)
{
User::find($id)->update([
'name' => $request->name,
'email' => $request->email
]);
return response()->json(['success'=>'User Updated Successfully!']);
}
}
Step 4: Add Route
In this step, we need to create a route for listing users and a PUT route. Open your 'routes/web.php' file and add the following routes.
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group that
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('users', [UserController::class, 'index']);
Route::put('users/{id}', [UserController::class, 'update'])->name('users.update');
Step 5: Create View
In the last step, let's create users.blade.php (located in 'resources/views/') for the layout. Here, we will write the design code, and then add the following code.
resources/views/users.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel Ajax PUT Request Example - Nicesnippets.com</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
<div class="container">
<h1>Laravel Ajax PUT Request Example - Nicesnippets.com</h1>
<table class="table table-bordered data-table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach($users as $user)
<tr data-id="{{ $user->id }}">
<td>{{ $user->id }}</td>
<td>{{ $user->name }}</td>
<td>{{ $user->email }}</td>
<td>
<a href="javascript:void(0)" id="edit-user" class="btn btn-primary" >Edit</a>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<!-- Modal -->
<div class="modal fade" id="userEditModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit User</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<input type="hidden" id="user-id" name="id"></span>
<p><strong>Name:</strong> <br/> <input type="text" name="name" id="user-name" class="form-control"></span></p>
<p><strong>Email:</strong> <br/> <input type="email" name="email" id="user-email" class="form-control"></span></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" id="user-update">Update</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function () {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
/*------------------------------------------
--------------------------------------------
When click user on Edit Button
--------------------------------------------
--------------------------------------------*/
$('body').on('click', '#edit-user', function () {
var userURL = $(this).data('url');
$('#userEditModal').modal('show');
$('#user-id').val($(this).parents("tr").find("td:nth-child(1)").text());
$('#user-name').val($(this).parents("tr").find("td:nth-child(2)").text());
$('#user-email').val($(this).parents("tr").find("td:nth-child(3)").text());
});
/*------------------------------------------
--------------------------------------------
When click user on Show Button
--------------------------------------------
--------------------------------------------*/
$('body').on('click', '#user-update', function () {
var id = $('#user-id').val();
var name = $('#user-name').val();
var email = $('#user-email').val();
$.ajax({
url: '/users/' + id,
type: 'PUT',
dataType: 'json',
data: { name: name, email: email},
success: function(data) {
$('#userEditModal').modal('hide');
alert(data.success);
$("tr[data-id="+id+"]").find("td:nth-child(2)").text(name);
$("tr[data-id="+id+"]").find("td:nth-child(3)").text(email);
}
});
});
});
</script>
</html>
Run Laravel App
All the required steps have been completed. Now, you just need to type the command provided below and hit enter to run the Laravel app.
php artisan serve
Now, open your web browser, enter the provided URL, and view the app output.
http://localhost:8000/users
I hope it can help you...
#Laravel 10
