In this tutorial we are going to discuss how to fetch data from mysql table and load that data into Bootstrap popover plugin by using PHP with Ajax Jquery without page refresh event. In my one of previous tutorial we have already discussing on how to fetch data from mysql table and load that data into Bootstrap Tooltip by using PHP with Ajax Jquery. First of all what is Popover, in web development popover is a same as Bootstrap tooltip javascript plugin that will pop up small amount of content will display if we have click on any html element on which we have applied popover. The main difference between tooltips and popover is that in popover we can contain much more content then tooltips. In this tutorial we can show content under popover when we have click on element then at that time one pop up message box will appear on the webpage with content, this pop up message box is a Bootstrap popover and it has been initialized by jQuery and here data is dynamic this data has been fetch from mysql table by using php script with help of jquery and Ajax. By using Ajax we can load this type of data without page refresh event. With the help of this Bootstrap popover we can display content for particular element when click on that element and by using this we can also load dynamic content into this Bootstrap popover. This type of feature will added functionality of your php application and we can see some type of dynamic data into this Bootstrap popover without opening of any web page. This way we can load dynamic mysql table content into Bootstrap popover by using php script with Jquery and Ajax. Here we have fetch mysql table data by using php script and we have execute php script by using ajax method and in jquery function we have used ajax method and by Bootstrap popover method we have called jquery function and so this way we can load dynamic html data into Bootstrap popover.
Source Code
--
-- 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,
`image` varchar(100) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=187 ;
--
-- Dumping data for table `tbl_employee`
--
INSERT INTO `tbl_employee` (`id`, `name`, `address`, `gender`, `designation`, `age`, `image`) VALUES
(1, 'Bruce Tom', '656 Edsel Road\r\nSherman Oaks, CA 91403', 'Male', 'Driver', 36, '1.jpg'),
(5, 'Clara Gilliam', '63 Woodridge Lane\r\nMemphis, TN 38138', 'Female', 'Programmer', 24, '2.jpg'),
(6, 'Barbra K. Hurley', '1241 Canis Heights Drive\r\nLos Angeles, CA 90017', 'Female', 'Service technician', 26, '3.jpg'),
(7, 'Antonio J. Forbes', '403 Snyder Avenue\r\nCharlotte, NC 28208', 'Male', 'Faller', 32, '4.jpg'),
(8, 'Charles D. Horst', '1636 Walnut Hill Drive\r\nCincinnati, OH 45202', 'Male', 'Financial investigator', 29, '5.jpg'),
(175, 'Ronald D. Colella', '1571 Bingamon Branch Road, Barrington, IL 60010', 'Male', 'Top executive', 32, '6.jpg'),
(174, 'Martha B. Tomlinson', '4005 Bird Spring Lane, Houston, TX 77002', 'Female', 'Systems programmer', 38, '7.jpg'),
(161, 'Glenda J. Stewart', '3482 Pursglove Court, Rossburg, OH 45362', 'Female', 'Cost consultant', 28, '8.jpg'),
(162, 'Jarrod D. Jones', '3827 Bingamon Road, Garfield Heights, OH 44125', 'Male', 'Manpower development advisor', 64, '9.jpg'),
(163, 'William C. Wright', '2653 Pyramid Valley Road, Cedar Rapids, IA 52404', 'Male', 'Political geographer', 33, '10.jpg');
index.php
<?php
$connect = mysqli_connect("localhost", "root", "", "testing");
$query = "SELECT * FROM tbl_employee ORDER BY id desc";
$result = mysqli_query($connect, $query);
?>
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | PHP AJAX Jquery - Load Dynamic Content in Bootstrap Popover</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.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.7/js/bootstrap.min.js"></script>
</head>
<body>
<br /><br />
<div class="container" style="width:800px;">
<h2 align="center">PHP AJAX Jquery - Load Dynamic Content in Bootstrap Popover</h2>
<h3 align="center">Employee Data</h3>
<br /><br />
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th width="20%">ID</th>
<th width="80%">Name</th>
</tr>
<?php
while($row = mysqli_fetch_array($result))
{
?>
<tr>
<td><?php echo $row["id"]; ?></td>
<td><a href="#" class="hover" id="<?php echo $row["id"]; ?>"><?php echo $row["name"]; ?></a></td>
</tr>
<?php
}
?>
</table>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('.hover').popover({
title:fetchData,
html:true,
placement:'right'
});
function fetchData(){
var fetch_data = '';
var element = $(this);
var id = element.attr("id");
$.ajax({
url:"fetch.php",
method:"POST",
async:false,
data:{id:id},
success:function(data){
fetch_data = data;
}
});
return fetch_data;
}
});
</script>
fetch.php
<?php
//fetch.php
if(isset($_POST["id"]))
{
$output = '';
$connect = mysqli_connect("localhost", "root", "", "testing");
$query = "SELECT * FROM tbl_employee WHERE id='".$_POST["id"]."'";
$result = mysqli_query($connect, $query);
while($row = mysqli_fetch_array($result))
{
$output = '
<p><img src="images/'.$row["image"].'" class="img-responsive img-thumbnail" /></p>
<p><label>Name : '.$row['name'].'</label></p>
<p><label>Address : </label><br />'.$row['address'].'</p>
<p><label>Gender : </label>'.$row['gender'].'</p>
<p><label>Designation : </label>'.$row['designation'].'</p>
<p><label>Age : </label>'.$row['age'].' Years</p>
';
}
echo $output;
}
?>
so cool :O
ReplyDeleteI have not understand the following block of code. I am new lerner in ajax please elaborate. Is popover a jquery syntax.
ReplyDelete$('.hover').popover({
title:fetchData, // fetchData is actualy the name of the function
html:true,
placement:'right'
});
Thanks for this cool code
Hello. For some reason, for me, Ajax (post) sends a request two times. Tell me what could be the problem
Deletei have an issue popover not working but when click it its popping up and previous one are not hddiing
ReplyDeleteThank you so much
ReplyDeleteGood afternoon friend,
ReplyDeleteYou could build a customer list, showing customers by states and cities.
For example:
State 1 - City 1
Listings of customers belonging to state1 and city1
State 1 - City 2
Listings of customers belonging to state1 and city2
State 1 - City 3
Listings of customers belonging to state1 and city3
State 2 - City 4
Listings of customers belonging to state2 and city4
State 2 - City 5
Listings of customers belonging to state2 and city5
State 3 - City 6
Listings of customers belonging to state3 and city6
State 3 - City 7
Listings of customers belonging to state3 and city7
State 4 - City 8
Listings of customers belonging to state4 and city8
And so on...