How to Create Dynamic Modal Box with Ajax, PHP and Mysql

Hello Coders, Today we will learn about how to create the dynamic modal box of bootstrap using Ajax, PHP & Mysql, By using this method you will know how we can load dynamic content on a page via Ajax & jQuery.
Using this script, you can learn how to pass data, variables, or parameters to external URL and get dynamic content via jQuery Ajax.

This tutorial includes

Database Table Structure
Database Configuration
HTML
JQuery
PHP

Now I am explaining the source code below.

1. Database Table Structure

We are going to create a user table with some columns sharing the code below.

CREATE TABLE `users` (
  `uid` int(11) NOT NULL,
  `Name` text NOT NULL,
  `City` text NOT NULL,
  `State` text NOT NULL,
  `Country` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
ALTER TABLE `users`
  ADD PRIMARY KEY (`uid`);
ALTER TABLE `users`
  MODIFY `uid` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;

Now we will import users data using below queries

INSERT INTO `users` (`uid`, `Name`, `City`, `State`, `Country`) VALUES
(1, 'Prashant', 'Jaipur', 'Rajasthan', 'India'),
(2, 'Abhishek', 'Delhi', 'Delhi', 'India'),
(3, 'Ashwani Bhatt', 'Jaipur', 'Rajasthan', 'India'),
(4, 'Harsh Gupta', 'Howrah', 'West Bengal', 'India'),
(5, 'Vivek', 'Jaipur', 'Rajasthan', 'India'),
(6, 'Nidz', 'Gurgaon', 'Hariyana', 'India');

2.Database Configuration

After creating the database table now we will create a configuration file called connection.php, In this configuration file, we will connect to the Mysql database using database parameters and credentials.

connection.php

<?php
$hostname = "localhost"; //Enter HostName
$username = "root";  //Enter Current User
$password = "";  //Enter Password (For xampp the password is blank)
$database = "practice_task"; //Database Name

$connection = mysqli_connect($hostname, $username, $password,$database);
// Check connection is working or not
if (!$connection) {
 die("Connection error: " . mysqli_connect_error());
} 
?>

3. Show Basic Data of Users from users table

After setting up the users' table and importing some dummy data we will show the basic information of the users.

Now create index.php and write the code

<?php  
//Prashantabhishek.com/blog/
 include("connection.php"); 
  $query = "SELECT uid,Name FROM users";  
 $result = mysqli_query($connection, $query); 
 ?>  
 <!DOCTYPE html>  
 <html>  
      <head>  
           <title>How to Create Dynamic Modal Box with Ajax, PHP and Mysql</title>  
           <script src="js/jquery-min.js"></script>  
           <link rel="stylesheet" href="css/bootstrap.min.css" />  
           <script src="js/bootstrap.min.js"></script>  
      </head>  
      <body>  
           <br /><br />  
           <div class="container" style="width:700px;">  
                <h3 align="center">How to Create Dynamic Modal Box with Ajax, PHP and Mysql</h3>  
                <br />  
                <div class="table-responsive">  
                     <table class="table table-bordered">  
                          <tr>  
                               <th width="70%">Name</th>  
                               <th width="30%">View</th>  
                          </tr>  
                          <?php  
                          while($row = mysqli_fetch_array($result))  
                          {  
                          ?>  
                          <tr>  
                               <td><?php echo $row["Name"]; ?></td>  
                               <td><input type="button" name="view" value="view" id="<?php echo $row["uid"]; ?>" class="btn btn-info btn-xs view_data" /></td>  
                          </tr>  
                          <?php  
                          }  
                          ?>  
                     </table>  
                </div>  
           </div>  
      </body>  
 </html>  
 <div id="dataModal" class="modal fade">  
      <div class="modal-dialog">  
           <div class="modal-content">  
                <div class="modal-header">  
                     <button type="button" class="close" data-dismiss="modal">&times;</button>  
                     <h4 class="modal-title">User Details</h4>  
                </div>  
                <div class="modal-body" id="User_detail">  
                </div>  
                <div class="modal-footer">  
                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
                </div>  
           </div>  
      </div>  
 </div>

4. Write JQuery Code for ajax

On the click on view more details, we will take the user id and send through the Ajax on the user details page and get the response to that page and append in the popup.

<script>  
 $(document).ready(function(){  
      $('.view_data').click(function(){  
           var user_id = $(this).attr("id");  
           $.ajax({  
                url:"user-details.php",  
                method:"post",  
                data:{user_id:user_id},  
                success:function(data){  
                     $('#User_detail').html(data);  
                     $('#dataModal').modal("show");  
                }  
           });  
      });  
 });  
 </script>

5. Get the Data from the User Details Page

Create a new file with the name of user-details.php

Select user data from user's tables according to the POST uid and create a table layout for fetching the records.

<?php 
include('connection.php'); 
 if(isset($_REQUEST["user_id"]))  
 {  
      $output = '';  
      $id=(int)$_REQUEST["user_id"];
      $query = "SELECT * FROM users WHERE uid = '".$id."'";  
      $result = mysqli_query($connection, $query);  
	 	  $nums=mysqli_num_rows($result);
 
 ?>
	<div class="table-responsive">  
		<table class="table table-bordered">
			<?php
			if($nums>0)
			{
				$rows = mysqli_fetch_array($result);
				?>
				<tr>  
                     <td width="40%"><label>Name</label></td>  
                     <td width="60%"><?=$rows["Name"];?></td>  
                </tr>  
                <tr>  
                     <td width="40%"><label>City</label></td>  
                     <td width="60%"><?=$rows["City"];?></td>  
                </tr>  
                <tr>  
                     <td width="40%"><label>State</label></td>  
                     <td width="60%"><?=$rows["State"];?></td>  
                </tr>  
                <tr>  
                     <td width="40%"><label>Country</label></td>  
                     <td width="60%"><?=$rows["Country"];?></td>  
                </tr> 
				<?php
			}
				?> 
			
		</table>
	</div>
<?php } ?>