Dynamically load content in Bootstrap Modal with AJAX

How to Load Dynamic Content in Bootstrap Modal,
Loading Dynamic Content on a Bootstrap Modal using jQuery,
How to load dynamic content in bootstrap modal,
Load Dynamic Content in Bootstrap Modal using Ajax

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.


  1. Table structure
  2. Configuration
  3. HTML
  4. PHP
  5. jQuery
  6. Conclusion

1. Table structure

Create employee table.
CREATE TABLE `employee` (
  `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.

$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "mydemo"; /* Database name */

$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
 die("Connection failed: " . mysqli_connect_error());


List records from employee table and add Info button following with a record.

Create a single Modal to display user information.

include "config.php";
<!doctype html>
  <!-- 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>
 <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">&times;</button>
      <div class="modal-body">
      <div class="modal-footer">
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

   <table border='1' style='border-collapse: collapse;'>
   $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>";

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.

include "config.php";

$userid = 0;
   $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;

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.


   var userid = $(this).data('id');

   // AJAX request
    url: 'ajaxfile.php',
    type: 'post',
    data: {userid: userid},
    success: function(response){ 
      // Add response in Modal body

      // Display Modal

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.

Please follow and like us:

By Rodney

I’m Rodney D Clary, a web developer. If you want to start a project and do a quick launch,I am available for freelance work.

Leave a Reply

Your email address will not be published. Required fields are marked *