Hello, laravel web developers! In this article, we'll see how to show data in modal using ajax in laravel 10. Here, we'll create a ajax call and fetch the data from database display in bootstrap modal popup in laravel 10.
You'll learn how to display data in a Bootstrap modal using Laravel. This guide provides a simple example of displaying data in a Bootstrap modal popup with Laravel. I'll explain step by step how to display data using an AJAX modal popup in Laravel 10.
You can use jQuery AJAX to fetch data in Laravel versions 8, 9, 10, and 11.
Laravel 10 Show Data in Modal using Ajax
In this step, we'll install laravel 10 application using the following command.
composer create-project laravel/laravel laravel-10-example
Next, we'lll create sample records for the user using the tinker.
php artisan tinker
User::factory()->count(25)->create()
Then, we'll create a controller and add the following code to controller file.
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 show($id)
{
$user = User::find($id);
return response()->json($user);
}
}
Now, we'll define the routes to the web.php file.
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 which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('users', [UserController::class, 'index']);
Route::get('users/{id}', [UserController::class, 'show'])->name('users.show');
Next, we'll create a blade file add the following HTML code to that file.
resources/views/users.blade.php
<!DOCTYPE html>
<html>
<head>
<title>How to Show Data in Modal using Ajax in Laravel 10 - Vidvatek</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h1>How to Show Data in Modal using Ajax in Laravel 10 - Vidvatek</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>
<td>{{ $user->id }}</td>
<td>{{ $user->name }}</td>
<td>{{ $user->email }}</td>
<td>
<a
href="javascript:void(0)"
id="show-user"
data-url="{{ route('users.show', $user->id) }}"
class="btn btn-info"
>Show</a>
</td>
</tr>
@endforeach
</tbody>
</table>
{{ $users->links() }}
</div>
<!-- Modal -->
<div class="modal fade" id="userShowModal" 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">Show User</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p><strong>ID:</strong> <span id="user-id"></span></p>
<p><strong>Name:</strong> <span id="user-name"></span></p>
<p><strong>Email:</strong> <span id="user-email"></span></p>
</div>
<div class="modal-footer">
<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 () {
/* When click show user */
$('body').on('click', '#show-user', function () {
var userURL = $(this).data('url');
$.get(userURL, function (data) {
$('#userShowModal').modal('show');
$('#user-id').text(data.id);
$('#user-name').text(data.name);
$('#user-email').text(data.email);
})
});
});
</script>
</html>
Now, run the laravel 10 application using the following command.
php artisan serve
You might also like:
- Read Also: Laravel 10 Country List with Flags Example
- Read Also: How to Display Tooltip in Bootstrap Vue JS
- Read Also: AJAX CRUD Operations In Laravel 10: Step-by-Step Guide
- Read Also: How to Display Toastr Notification in Bootstrap Vue JS