Bootstrap Modal is a popup box that is customizable and responsive.
It can be used in many different ways – display login or registration form, terms, and conditions, information, image, etc.
In this tutorial, I am using AJAX to display user information on the Bootstrap Modal according to the requested data.
Contents
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 ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
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
List records from employee
table and add Info
button following with a record.
Create a single Modal to display user information.
Completed Code
<?php include "config.php"; ?> <!doctype html> <html> <head> <!-- CSS --> <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css'> <!-- Script --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js' type='text/javascript'></script> </head> <body > <div class="container" > <!-- Modal --> <div class="modal fade" id="empModal" role="dialog"> <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="close" data-dismiss="modal">×</button> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <br/> <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. PHP
Create a new ajaxfile.php
file.
Select records from employee
table according to the POST userid
 and create a table layout with fetched records.
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
On the click of Info
button get the button id and split it to get the userid
. Send an AJAX request where pass the userid
as data
.
Append response
in .modal-body
on AJAX successfully callback and display the modal by 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.