Solved

PHP Automated Tooltips with MySQL

Posted on 2008-10-09
2
5,549 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

I imagine that there are some, like me, who require a way of getting currency exchange rates for implementation in web project from time to time, so I thought I would share a solution that I have developed for this purpose. It turns out that Yaho…
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

622 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