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.
Database Table Structure
Database Configuration
HTML
JQuery
PHP
Now I am explaining the source code below.
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');
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());
}
?>
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">×</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>
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>
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 } ?>
If you found this article helpful then don't forget to share it with others.
Read More
Create Dynamic Subdomain with the help of PHP and Htaccess
Send an Email Using Phpmailer and Amazon SES in PHP with Source Code
Prashant Kr Abhishek
Software Engineer
Stay in the Know, Signup for emails to get new updates around the world !
© 2024 Prashantabhishek.com | All rights reserved