Wednesday, 12 October 2016

PHP AJAX Jquery - Load Dynamic Data in Bootstrap Tooltip



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


 <?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  
 //fetch.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;  
 }  
 ?>  

2 comments: