How to Show user data dynamically in Modal using jQuery in Laravel 10
Hello devs, today we will learn how to show user data dynamically in a modal using jquery in laravel 10. I will show user information in a popup modal for an individual user when clicks on View Details button. I will pass the user data according to specific user and show full details in the modal popup. Firstly we will display all user list in a table with few columns and next click on View Details button then the popup will open with full user details.
Let's follow the bellow steps to show data in modal in aravel 10.
Step 1. Users Table
Think you have a users table with few records like bellow.
Step 2. Required Routes
Now we need to create a route in web.php file to display all users list.
Route::get('/user-list', [UserListController::class, 'user_list']);
Step 3. Controller Code
Now update the UserListController controller like bellow.
<?php
namespace App\Http\Controllers;
use App\Models\User;
class UserListController extends Controller
{
public function user_list()
{
$user_lists = User::all();
return view('user-list',compact('user_lists'));
}
}
Step 4. Display Users List
In this step we will display all user list with some columns. When you click View Details button then a modal popup open and display specific user all information.
user-list.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Dynamic Slug Generate</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="offset-md-2 col-md-8">
<h4 class="text-success text-center mb-5">Users List</h4>
<table class="table table-bordered">
<thead>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Email</td>
<td>Phone</td>
<td>Details</td>
</tr>
</thead>
<tbody>
@foreach($user_lists as $list)
<tr>
<td>{{ $list->first_name }}</td>
<td>{{ $list->last_name }}</td>
<td>{{ $list->email }}</td>
<td>{{ $list->phone }}</td>
<td>
<a class="btn btn-sm btn-primary show_user_details"
data-bs-toggle="modal"
data-bs-target="#UserDetailsModal"
data-first_name="{{ $list->first_name }}"
data-last_name="{{ $list->last_name }}"
data-email="{{ $list->email }}"
data-phone="{{ $list->phone }}"
data-country="{{ $list->country }}"
data-state="{{ $list->state }}"
data-city="{{ $list->city }}"
href="#">
View Details
</a>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
@include('user-details-modal')
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
@include('user-details-js')
</body>
</html>
Step 5. Popup Modal Markup
user-details-modal .blade.php
<!-- Modal -->
<div class="modal fade" id="UserDetailsModal" tabindex="-1" aria-labelledby="UserDetailsModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="UserDetailsModalLabel">User Details</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p><strong>First Name: </strong><span class="first_name"></span></p>
<p><strong>Last Name: </strong><span class="last_name"></span></p>
<p><strong>Phone: </strong><span class="phone"></span></p>
<p><strong>Email: </strong><span class="email"></span></p>
<p><strong>Country: </strong><span class="country"></span></p>
<p><strong>State: </strong><span class="state"></span></p>
<p><strong>City: </strong><span class="city"></span></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Step 6. Required Jquery Codes
user-details-js .blade.php
<script>
//todo:slug generate
$(document).on('click', '.show_user_details', function (e) {
let first_name = $(this).data('first_name');
let last_name = $(this).data('last_name');
let phone = $(this).data('phone');
let email = $(this).data('email');
let country = $(this).data('country');
let state = $(this).data('state');
let city = $(this).data('city');
$('.first_name').text(first_name);
$('.last_name').text(last_name);
$('.phone').text(phone);
$('.email').text(email);
$('.country').text(country);
$('.state').text(state);
$('.city').text(city);
});
</script>
In the above code when we click on the View Details button (show_user_details class) we will open a popup modal and get all the values using data attributes and set those values inside modal using the text() method. Thus using jquery we can display data into modal.
Now hit the url http://127.0.0.1:8000/user-list in the bowser and test the task.
If you like what you are reading, please think about buying us a coffee as a token of appreciation.
We appreciate your support and are committed to providing you useful and informative content.
We are thankful for your ongoing support
You May Also Like:
How to setup jQuery with Laravel 10 and vite - WebJourney
Realtime Check Password and Confirm Password is Match or not in jQuery Javascript
jQuery Javascript Dynamic Slug Generate - WebJourney
Dynamic Dependent Dropdown Laravel 10 jQuery Ajax(Category SubCategory)