Wednesday, 12 October 2016

PHP AJAX Jquery - Load Dynamic Data in Bootstrap Tooltip

           , , , , , ,      10 comments   


In this tutorial we are going to discuss how to fetch data from mysql table and load that data into Bootstrap tooltip by using PHP with Ajax Jquery without page refresh event. First of all what is tooltip, in web development tooltip is a small Bootstrap javascript plugin that pop up small message will appear if mouse over of any html element on which we have applied tooltip. In this post we can show that when mouse over on html element then at that time one pop up message box appear on the screen with some data, this pop up message box is a Bootstrap tooltip 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 tooltip we can display text message for particular element when mouse over on that element and by using this we can also load dynamic data into this Bootstrap tooltip. This type of feature will added functionality of your php application and we can see some type of dynamic data into this Bootstrap tooltip without opening of any web page. In this system 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 tooltip method we have called jquery function and so this way we can load dynamic html data into Bootstrap tooltip.




Source Code


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 Data in Bootstrap Tooltip</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:600px;">
   <h2 align="center">PHP AJAX Jquery - Load Dynamic Data in Bootstrap Tooltip</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><label><a href="#" class="hover" id="<?php echo $row["id"]; ?>"><?php echo $row["name"]; ?></a></label></td>
     </tr>
     <?php 
     }
     ?>
    </table>
   </div>
   
  </div>
 </body>
</html>

<script>
 $(document).ready(function(){

  $('.hover').tooltip({
   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
if(isset($_POST["id"]))
{
 $connect = mysqli_connect("localhost", "root", "", "testing");
 $output = '';
 $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;
}
?>

Database



--
-- 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=176 ;

--
-- 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');

10 comments: