Modals are one of the many pre-built components offered by the widely used front-end web development framework Bootstrap. Developers can display content on top of an existing page by using dialogue boxes or pop-up windows known as modals.
However, there are times when need to dynamically load content into the Modal, which is possible with AJAX.
AJAX allows data to be loaded and displayed on a page without having to reload the entire page, making the web application faster and more user-friendly.
In this tutorial, I will show you how to dynamically load MySQL database content into a Bootstrap Modal using AJAX and PHP.
I am using Bootstrap 5 in the example, if you are using any other version then also you can follow.
Contents
- Table structure
- Configuration
- HTML – Create Modal & Table layout
- AJAX – Return Bootstrap Modal Data
- jQuery – Send AJAX request to Dynamically Load Content
- Demo
- Conclusion
1. Table structure
Create employee table.
CREATE TABLE `employee` ( `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT, `emp_name` varchar(100) NOT NULL, `salary` varchar(50) NOT NULL, `gender` varchar(10) NOT NULL, `city` varchar(80) NOT NULL, `email` varchar(100) NOT NULL );
2. Configuration
Create a config.php for the database connection.
Completed Code
<?php
$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "tutorial"; /* Database name */
$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
die("Connection failed: " . mysqli_connect_error());
}
3. HTML – Create Modal & Table layout
Create a single Bootstrap Modal to display user information. Modal body is empty, data gets populated using jQuery AJAX.
List employee table records in tabular format. Here, also added an Info button that has userinfo class and stored employee id in data-id attribute. On this button click load content in a modal using AJAX.
Completed Code
<?php
include "config.php";
?>
<!doctype html>
<html>
<head>
<title>Dynamically load content in Bootstrap Modal with AJAX</title>
<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body >
<div class="container" >
<!-- Modal -->
<div class="modal fade" id="empModal" >
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">User Info</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<br/>
<!-- Employees List -->
<table class='table' border='1' style='border-collapse: collapse;'>
<tr>
<th>Name</th>
<th>Email</th>
<th> </th>
</tr>
<?php
$query = "select * from employee";
$result = mysqli_query($con,$query);
while($row = mysqli_fetch_array($result)){
$id = $row['id'];
$name = $row['emp_name'];
$email = $row['email'];
echo "<tr>";
echo "<td>".$name."</td>";
echo "<td>".$email."</td>";
echo "<td><button data-id='".$id."' class='userinfo'>Info</button></td>";
echo "</tr>";
}
?>
</table>
</div>
</body>
</html>
4. AJAX – Return Bootstrap Modal Data
Create ajaxfile.php file.
Read POST userid value and assign it to $userid variable. Select a record from employee table where id=$userid. Read the fetched data and create a table layout and assign it to $response variable.
Return the $response.
Completed Code
<?php
include "config.php";
$userid = 0;
if(isset($_POST['userid'])){
$userid = mysqli_real_escape_string($con,$_POST['userid']);
}
$sql = "select * from employee where id=".$userid;
$result = mysqli_query($con,$sql);
$response = "<table border='0' width='100%'>";
while( $row = mysqli_fetch_array($result) ){
$id = $row['id'];
$emp_name = $row['emp_name'];
$salary = $row['salary'];
$gender = $row['gender'];
$city = $row['city'];
$email = $row['email'];
$response .= "<tr>";
$response .= "<td>Name : </td><td>".$emp_name."</td>";
$response .= "</tr>";
$response .= "<tr>";
$response .= "<td>Salary : </td><td>".$salary."</td>";
$response .= "</tr>";
$response .= "<tr>";
$response .= "<td>Gender : </td><td>".$gender."</td>";
$response .= "</tr>";
$response .= "<tr>";
$response .= "<td>City : </td><td>".$city."</td>";
$response .= "</tr>";
$response .= "<tr>";
$response .= "<td>Email : </td><td>".$email."</td>";
$response .= "</tr>";
}
$response .= "</table>";
echo $response;
exit;
5. jQuery – Send AJAX request to Dynamically Load Content
Define click event on userinfo class. Read data-id attribute value and assign it to userid variable.
Send AJAX POST request to ajaxfile.php file. Here, pass {userid: userid} as data. On successful callback append response in .modal-body and display the modal calling show method.
Completed Code
$(document).ready(function(){
$('.userinfo').click(function(){
var userid = $(this).data('id');
// AJAX request
$.ajax({
url: 'ajaxfile.php',
type: 'post',
data: {userid: userid},
success: function(response){
// Add response in Modal body
$('.modal-body').html(response);
// Display Modal
$('#empModal').modal('show');
}
});
});
});
6. Demo
7. Conclusion
Use AJAX when you want to use a single Bootstrap Modal to display information according to various requests otherwise, you can simply create multiple Modal with information for each task.
If you found this tutorial helpful then don't forget to share.