Hello friends in this tutorial we are going to learn how to display dynamic mysql data in Bootstrap Modal by using PHP programming with Jquery Ajax without page refresh. Now a days Bootstrap Modals are become most accepted and main user interface for any type of web application and with the help of modals we can do different type of things. Mainly Modals are useful for insert, edit and remove data from database and you can also use for displaying dynamic data on Bootstrap modal. Here we will use Jquery Ajax method for displaying Database content on Bootstrap modals. So it is very useful user interface for show data in details without going to other page, we can see the data in detail on that page without going to other page and without refreshing page. This is the power of Bootstrap with Jquery Ajax, We can get detail information about employee data on page and we do not want to create other new page for displaying data in details. We can use this type of user interface in our we project, it will increase the productivity and working speed of your php web application and it is Bootstrap so it is responsive so it will be adjust on any device. With help of ajax call we can fetch particular data from table and display that data on Bootstrap modal without page refresh.
Source Code
tbl_employee
--
-- Table structure for table `tbl_employee`
--
CREATE TABLE IF NOT EXISTS `tbl_employee` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(50) NOT NULL,
`address` text NOT NULL,
`gender` varchar(10) NOT NULL,
`designation` varchar(100) NOT NULL,
`age` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=22 ;
--
-- Dumping data for table `tbl_employee`
--
INSERT INTO `tbl_employee` (`id`, `name`, `address`, `gender`, `designation`, `age`) VALUES
(1, 'Bruce Tom', '656 Edsel Road\r\nSherman Oaks, CA 91403', 'Male', 'Driver', 36),
(5, 'Clara Gilliam', '63 Woodridge Lane\r\nMemphis, TN 38138', 'Female', 'Programmer', 24),
(6, 'Barbra K. Hurley', '1241 Canis Heights Drive\r\nLos Angeles, CA 90017', 'Female', 'Service technician', 26),
(7, 'Antonio J. Forbes', '403 Snyder Avenue\r\nCharlotte, NC 28208', 'Male', 'Faller', 32),
(8, 'Charles D. Horst', '1636 Walnut Hill Drive\r\nCincinnati, OH 45202', 'Male', 'Financial investigator', 29),
(9, 'Beau L. Clayton', '3588 Karen Lane\r\nLouisville, KY 40223', 'Male', 'Extractive metallurgical engin', 33),
(10, 'Ramona W. Burns', '2170 Ocala Street\r\nOrlando, FL 32801', 'Female', 'Electronic typesetting machine operator', 27),
(11, 'Jennifer A. Morrison', '2135 Lakeland Terrace\r\nPlymouth, MI 48170', 'Female', 'Rigging chaser', 29),
(12, 'Susan M. Juarez', '3177 Horseshoe Lane\r\nNorristown, PA 19403', 'Female', 'Control and valve installer', 25),
(13, 'Ellan D. Downie', '384 Flynn Street\r\nStrongsville, OH 44136', 'Female', 'Education and training manager', 26),
(14, 'Larry T. Williamson', '1424 Andell Road\r\nBrentwood, TN 37027', 'Male', 'Teaching assistant', 30),
(15, 'Lauren M. Reynolds', '4798 Echo Lane\r\nKentwood, MI 49512', 'Female', 'Internet developer', 22),
(16, 'Joseph L. Judge', '3717 Junkins Avenue\r\nMoultrie, GA 31768', 'Male', 'Refrigeration mechanic', 35),
(17, 'Eric C. Lavelle', '1120 Whitetail Lane\r\nDallas, TX 75207', 'Male', 'Model', 21),
(18, 'Cheryl T. Smithers', '1203 Abia Martin Drive\r\nCommack, NY 11725', 'Female', 'Personal banker', 23),
(19, 'Tonia J. Diaz', '4724 Rocky Road\r\nPhiladelphia, PA 19107', 'Female', 'Facilitator', 29),
(20, 'Stephanie P. Lederman', '2117 Larry Street\r\nWaukesha, WI 53186', 'Female', 'Mental health aide', 27),
(21, 'Edward F. Sanchez', '2313 Elliott Street\r\nManchester, NH 03101', 'Male', 'Marine oiler', 28);
index.php
<?php
$connect = mysqli_connect("localhost", "root", "", "testing");
$query = "SELECT * FROM employee";
$result = mysqli_query($connect, $query);
?>
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Bootstrap Modal with Dynamic MySQL Data using Ajax & PHP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<br /><br />
<div class="container" style="width:700px;">
<h3 align="center">Bootstrap Modal with Dynamic MySQL Data using Ajax & PHP</h3>
<br />
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th width="70%">Employee 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["id"]; ?>" 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">Employee Details</h4>
</div>
<div class="modal-body" id="employee_detail">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.view_data').click(function(){
var employee_id = $(this).attr("id");
$.ajax({
url:"select.php",
method:"post",
data:{employee_id:employee_id},
success:function(data){
$('#employee_detail').html(data);
$('#dataModal').modal("show");
}
});
});
});
</script>
select.php
<?php
if(isset($_POST["employee_id"]))
{
$output = '';
$connect = mysqli_connect("localhost", "root", "", "testing");
$query = "SELECT * FROM employee WHERE id = '".$_POST["employee_id"]."'";
$result = mysqli_query($connect, $query);
$output .= '
<div class="table-responsive">
<table class="table table-bordered">';
while($row = mysqli_fetch_array($result))
{
$output .= '
<tr>
<td width="30%"><label>Name</label></td>
<td width="70%">'.$row["name"].'</td>
</tr>
<tr>
<td width="30%"><label>Address</label></td>
<td width="70%">'.$row["address"].'</td>
</tr>
<tr>
<td width="30%"><label>Gender</label></td>
<td width="70%">'.$row["gender"].'</td>
</tr>
<tr>
<td width="30%"><label>Designation</label></td>
<td width="70%">'.$row["designation"].'</td>
</tr>
<tr>
<td width="30%"><label>Age</label></td>
<td width="70%">'.$row["age"].' Year</td>
</tr>
';
}
$output .= "</table></div>";
echo $output;
}
?>
Thanks man, I really needed this.
ReplyDeleteHi, i have two table one where firstname, lastname,id,age and another have two column one id and person's brothers name. I first want to show data in page firstname,lastname,view then click view will open modal at which will display table such as table header (fistname,lastname,id,age)tbody(mamun,rashid,2,29,view) click view will open modal and display mamun's brothers name.
ReplyDeleteThank you very muuch for your tutorial.
ReplyDeleteI had changed this example with PDO, if you wish you can tell me when I can to put this examples and I do it.
Doesn't work!
ReplyDeleteI'm exhausted figuring out the AJAX POST
Hi, my modal is showing but no records are coming up
ReplyDeletewhy does it not work anymore
ReplyDeletewhy does it not work anymore
ReplyDeleteHey I tried but its not working . everything is fine but when I click the view button the modal doesn't show up
ReplyDeleteHey I tried but its not working . everything is fine but when I click the view button the modal doesn't show up
ReplyDeleteThank you for sharing your knowledge. Very useful! On index file, you can correct table of employees with tbl_employee on 3-th row to work perfect. I am watching your videos. Best regards!
ReplyDeletethank you so much it's working for me and it is super
ReplyDeletewhere put tbl_employee
ReplyDeletethanks it was very helpful ! but i don't understand why i can't display the picture in the modal can u please help me ?
ReplyDeleteThanks sir.
ReplyDeletethank you, pounding my head and this helped
ReplyDeletewhere did you get "employee-id"
ReplyDeleteyou are the best
ReplyDeleteThanks a lot man your articles have really helped me, I really appreciate it.
ReplyDeletethis tutorial is very clear and added a nice touch in my project website! thanks a lot!
ReplyDeleteThanks, you are the best.
ReplyDeleteGood presentation!
ReplyDeleteBut if a field in each record also has a picture, how can we show that picture?
good
ReplyDeleteThis is great you saved my job
ReplyDeleteyou saved my day buddy, I really appreciate it.
ReplyDeleteIm having trouble combining 2 table in the select.php file. pls help
ReplyDeleteIm having trouble joining 2 table in select.php page. Any help pls
ReplyDeleteThis Code Worked Very Well But only on local server , On Live Server is Having Trouble in It's Model
ReplyDeletescreen become small
ReplyDeleteI need the same script but with Ajax plain. I mean Ajax like xhr.
ReplyDeletemine won't work
ReplyDeleteFor those who are wondering why it doesn't work:
ReplyDelete$query = "SELECT * FROM employee"; should be $query = "SELECT * FROM tbl_employee";
cause the table is named tbl_employee when he created the table on mysql