If you are using jQuery as front-end for you web development, then this post will helpful. Because in this post we have covered topic like How to Load Ajax content in jQuery UI Tooltip plugin by using PHP script. Do you know what is tooltip, in a web development tooltip is a simple message that will fade in on web page when mouse cursor is move over any element like icon, image, hyperlink or simple text on webpage. But here we will load dynamic data into jQuery Tooltip by using PHP script with Ajax. By using Ajax, it will called request for fetch data from Mysql database, and convert into HTML format and load into tooltip plugin. That means all details will be appear on web page in tooltip while cursor move on particular element on web page.
By using Tooltip plugin, it will increase the UI of your web application. For make dynamic tooltip here we have use jQuery UI library tooltip plugin. By using tooltip, we can display hint or information of graphical UI. It is mainly initialize when cursor move hover on any element on web page. There many different ways we can use tooltips in web development, e.g. we can use tooltip for display for validation message on web page. There are different other way we can use tooltip. Tooltip is also benifit for form elements to display additional information for any HTML element in form.
Here we have take simple example of display student additional details in tooltip. When mouse move on any student name, in tooltip we have load that student image and other details like name phone number etc. For do this things we have use Ajax with jquery UI Tooltip plugin. For initialize tooltip plugin, here we have use tooltip() method. This method has been used to initialize tooltip plugin on HTML element. When mouse move on HTML element then here we have trigger Ajax request under content option callback function. This Ajax request send request to PHP script and fetch particular student data, convert into HTML format and lastly load under jQuery Tooltip plugin. For get complete source code of How to Load Dynamic Data in jQuery UI Tooltip using Ajax with PHP, below you can find complete source code.
Read Also
Source Code
database_connection.php
<?php
//database_connection.php
$connect = new PDO("mysql:host=localhost;dbname=testing", "root", "");
?>
index.php
<!--
//index.php
!-->
<?php
include('database_connection.php');
$query = "SELECT * FROM tbl_student ORDER BY student_name ASC";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
?>
<html>
<head>
<title>How to Load Ajax Data in jQuery UI Tooltip using PHP</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<br />
<h3 align="center">How to Load Ajax Data in jQuery UI Tooltip using PHP</a></h3><br />
<br />
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Student Details</h3>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered">
<tr>
<th>Student Name</th>
</tr>
<?php
foreach($result as $row)
{
echo '<tr><td><b><a href="#" id="'.$row["student_id"].'" title=" ">'.$row["student_name"].'</a></b></td></tr>';
}
?>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('a').tooltip({
classes:{
"ui-tooltip":"highlight"
},
position:{ my:'left center', at:'right+50 center'},
content:function(result){
$.post('fetch.php', {
id:$(this).attr('id')
}, function(data){
result(data);
});
}
});
});
</script>
fetch.php
<?php
//fetch.php
include('database_connection.php');
if(isset($_POST["id"]))
{
$query = "SELECT * FROM tbl_student WHERE student_id = '".$_POST["id"]."'";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
$output = '';
foreach($result as $row)
{
$output .= '
<img src="images/'.$row["image"].'" class="img-thumbnail" />
<h4>Name - '.$row["student_name"].'</h4>
<h4>Phone No. - '.$row["student_phone"].'</h4>
';
}
echo $output;
}
?>
But after a while It's not showing data, why (Sever did not send any data)?
ReplyDelete