Solved

PHP Automated Tooltips with MySQL

Posted on 2008-10-09
2
5,431 Views
Last Modified: 2012-05-05
Hi everyone I hope you are all well.

Guys i have the following setup.

1 MySQL Table called:    tooltip_ttp
------------------------------------------------------------
It has 3 fields, with the following rows currently..
           1) id_ttp   (autonum)      2) name_ttp   (varchar)      3) description_ttp  (text)
rows:        1                                 Ajax                                   This is Ajax
                  2                                 HTML                                  This is HTML
                  3                                 CSS                                   This is CSS
                  4                                 PHP                                    This is PHP
etc

I have 1 html page: ajax-tooltip.html
------------------------------------------------------------
This calls a javascript function on mouseover of a link, which displays the description_ttp field data from the row given in the query string, for example:

<a href="#" onmouseover="ajax_showTooltip('demo-pages/ajax-tooltip.php?id=4',this);return false" onmouseout="ajax_hideTooltip()">PHP</a></td>

1 php page called ajax-tooltip.php
------------------------------------------------------------
This gets the posted value of 'id' in the query string from ajax-tooltip.html, then uses it to run a mysql query to return the right row and its description to display in a tooltip on the page ajax-tooltip.html


##############################
WHAT IM TRYING TO DO:
##############################

Currently, in ajax-tooltip.html, im hard coding a hrefs along with a hard coded query string id number for every link that i want to display a tooltip for from the mysql table. I dont want to have to hard code query string values nor have to duplicate javascript on mouseover code

What i would like is the following...

In ajax-tooltip.html,

Display in a table (or div) a list of every record (the name_ttp field) as a link.
On mouseover of each of those links, the corresponding description_ttp text is displayed in the tooltip.

So basically,
currently...

<a href="#" onmouseover="ajax_showTooltip('demo-pages/ajax-tooltip.php?id=4',this);return false" onmouseout="ajax_hideTooltip()">PHP</a></td>

going to what id like which would be something like:

<link (name_ttp field ) >  on mouseover, display description_ttp for this row in a tooltip
<link (name_ttp field ) >  on mouseover, display description_ttp for this row in a tooltip
<link (name_ttp field ) > on mouseover, display description_ttp for this row in a tooltip
<link (name_ttp field ) >  on mouseover, display description_ttp for this row in a tooltip
<link (name_ttp field ) > on mouseover, display description_ttp for this row in a tooltip
etc

Each of the above lines eg. the links with name_ttp field, and the onmouseover, ideally would be automatically created for every record from the mysql table, along with its associated query string id value.

Any help greatly appreciated.

Guys i have attached the code in the snippet window for the files.

Thank you.
==================================== ajax-tooltip.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Ajax tooltip</title>
	<script type="text/javascript" src="js/ajax-dynamic-content.js"></script>
	<script type="text/javascript" src="js/ajax.js"></script>
	<script type="text/javascript" src="js/ajax-tooltip.js">	
	</script>	
	<link rel="stylesheet" href="css/ajax-tooltip.css" media="screen" type="text/css">
	<link rel="stylesheet" href="css/ajax-tooltip-demo.css" media="screen" type="text/css">
</head>
<body>
 
<div id="mainContainer">
	<div id="menuColumn">		
	</div>
	<div id="mainContent">
		<table width="100%" class="productTable">
			<thead>
				<th>Product</th>
				<th>Info</th>
			</thead>
			<tbody>
				<tr class="oddRow">
					<td>JS Calendar</td>
					<td>
						<a href="#" onmouseover="ajax_showTooltip('demo-pages/ajax-tooltip.php?id=4',this);return false" onmouseout="ajax_hideTooltip()">PHP</a></td>	
				</tr>			
				</tr>
			</tbody>
		</table>	
		<div id="debug"></div>
	</div>
</div>
 
</body>
</html>
 
============================================ ajax-tooltip.php
<?php
$dbServer="localhost";
$dbName="foo";
$link = mysql_connect( $dbServer, 'root', 'password');
if (!$link) {
    die('Not connected : ' . mysql_error());
}
 
// make foo the current db
$db_selected = mysql_select_db($dbName, $link);
if (!$db_selected) {
    die ("Can't use $dbName : " . mysql_error());
}
 
$result = mysql_query("SELECT description_ttp FROM tooltip_ttp WHERE id_ttp=" . $_GET['id'] ) or die( mysql_error());
 
$row=mysql_fetch_assoc($result);
echo $row['description_ttp'];
mysql_close();
?>

Open in new window

0
Comment
Question by:Simon336697
2 Comments
 
LVL 15

Accepted Solution

by:
babuno5 earned 500 total points
ID: 22685327
you will have to re write ajax-tooltip.html as  ajax-tooltip_display.php

sample code for ajax-tooltip_display.php is shown below


<html>
<head>
        <title>Ajax tooltip</title>
        <script type="text/javascript" src="js/ajax-dynamic-content.js"></script>
        <script type="text/javascript" src="js/ajax.js"></script>
        <script type="text/javascript" src="js/ajax-tooltip.js">        
        </script>       
        <link rel="stylesheet" href="css/ajax-tooltip.css" media="screen" type="text/css">
        <link rel="stylesheet" href="css/ajax-tooltip-demo.css" media="screen" type="text/css">
</head>
<body>
 
<div id="mainContainer">
        <div id="menuColumn">           
        </div>
        <div id="mainContent">
                <table width="100%" class="productTable">
                        <thead>
                                <th>Product</th>
                                <th>Info</th>
                        </thead>
                        <tbody>
                                <tr class="oddRow">
                                        <td>JS Calendar</td>
                                        <td>
										<table border =1>
				
										<?
											$result = mysql_query("SELECT id_ttp,name_ttp FROM tooltip_ttp" ) or die( mysql_error());
											 
											while ($row = mysql_fetch_assoc($result)) {
												echo "<tr><td>";
												echo "<a href=\"#\"  onmouseover=\"ajax_showTooltip('demo-pages/ajax-tooltip.php?id=".$row["id_ttp"]."',this);return false\" onmouseout=\"ajax_hideTooltip()\">".$row["name_ttp"]."</a>";
												echo "</td></tr>";
 
											}
 
										?></table>		
										</td>   
                                </tr>                   
                                </tr>
                        </tbody>
                </table>        
                <div id="debug"></div>
        </div>
</div>
 
</body>
</html>

Open in new window

0
 
LVL 1

Author Comment

by:Simon336697
ID: 22685387
Hi babuno5,
Thanks so much mate...that is terrific thank you.
0

Featured Post

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article will explain how to display the first page of your Microsoft Word documents (e.g. .doc, .docx, etc...) as images in a web page programatically. I have scoured the web on a way to do this unsuccessfully. The goal is to produce something …
Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question