Dynamically load content in Bootstrap Modal with AJAX

Bootstrap Modal is a popup box which 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.

Dynamically load content in Bootstrap Modal with AJAX


Contents

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

 


1. Table structure

Create employee table.

CREATE TABLE `emplyee` (
  `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 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 the 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.2.1/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">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">User Info</h4>
      </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 border='1' style='border-collapse: collapse;'>
    <tr>
     <th>Name</th>
     <th>Email</th>
     <th>&nbsp;</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 id='butinfo_".$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 = $_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['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 .= "</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 id = this.id;
   var splitid = id.split('_');
   var userid = splitid[1];

   // 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. Conclusion

Use AJAX when you want to use 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.
Spread the love
  •  
  •  
  •  
  •  
  •  

4 Comments

  1. Fred said:

    Thank you very much

    March 9, 2018
    Reply
  2. Nerdyvec said:

    Thank man it work perfectly

    July 5, 2018
    Reply
  3. mega putra said:

    Hi Yogesh,
    when I click on the link to show the pop up modal, it said
    Warning: mysqli_fetch_array() expects parameter 1 to be mysqli_result, boolean given in D:\backup_asus\xampp\htdocs\tracerstudy\dynamicmodal\ajaxfile.php on line 10

    What is wrong? Thanks

    this is my link
    https://balimedikajurnal.com/tracerstudy/dynamicmodal/

    March 13, 2019
    Reply
    • Yogesh Singh said:

      The value is not POST from AJAX request. I checked the page button element not has userid attached in the id attribute (‘butinfo_’). The page will start working correctly when you fix this.

      March 14, 2019
      Reply

Leave a Reply

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