Javascript popup window not working
I have a javascript popup window that will display details about the record they are on but I can't seem to get it to work. I have it working on another page but I have been banging my head against the wall and can't figure out whats missing. Blow is all the code.
index.php
tooltip.js
view_details.php
index.php
<?php error_reporting(E_ALL); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="images/plane.ico">
<link rel="stylesheet" type="text/css" href="css/filtergrid.css" />
<script src="scripts/tablefilter_all_min.js" language="javascript" type="text/javascript"></script>
<script src="scripts/tooltip.js" language="javascript" type="text/javascript"></script>
<script src="scripts/jquery.js" language="javascript" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>ATS Flight Track</title>
</head>
<body>
<?php
require("class.phpmailer.php");
include ("navigation.php");
navigation();
?>
<td width="1700" valign="top">
		<?php
$LDAPusername = $_SERVER['REMOTE_USER'];
if ($atpos = strpos($LDAPusername , "@")) {
$LDAPusername = substr($username, 0, $atpos);
} else
{
$LDAPusername = substr(strrchr($LDAPusername, '\\'), 1);
}
	$con = mysql_connect("localhost","root","pass");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
//$LDAPusername = "michaelc";
mysql_select_db('ats');
$query = mysql_query("SELECT * FROM atsusers WHERE login = '$LDAPusername'") or die (mysql_error());
$numofrows = mysql_num_rows($query);
$row = mysql_fetch_assoc($query);
$fullname = $row['fullname'];
//$fullname = "Brent Anderson";
$email = $LDAPusername ."@ats-inc.com";
	$con = mysql_connect("localhost","root","pass");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
//$LDAPusername = "michaelc";
mysql_select_db('flight_track');
$query = mysql_query("SELECT * FROM flight_track WHERE requester = '$fullname' ORDER BY id ASC") or die (mysql_error());
?>
<b>Flights</b>
<div style="width:1400px;">
					<table width="100%" cellspacing="0" id="users">
<?php
echo "<tr>";
echo "<th>";
echo "<b>Name:</b>";
echo "</th>";
echo "<th>";
echo "<b>Supervisor:</b>";
echo "</th>";
echo "<th>";
echo "<b>Date Requested:</b>";
echo "</th>";
echo "<th>";
echo "<b>Flight Details:</b>";
echo "</th>";
echo "</tr>";
while ($info = mysql_fetch_assoc($query))
{
$requester = $info['requester'];
$supervisor = $info['supervisor'];
$information = $info['information'];
$date_requested = $info['date_requested'];
$id = $info['id'];
?>
<tr>
<?php
echo "<td>";
echo $requester;
echo "</td>";
echo "<td>";
echo $supervisor;
echo "</td>";
echo "<td>";
echo $date_requested;
echo "</td>";
echo "<td class='navigation'>";
echo "<a href=test.php data-id='$id'>Details</a>";
echo "</td>";
echo "</tr>";
}
?>
			</table>
</div>
<div id="response"></div>
<script language="javascript" type="text/javascript">
//<![CDATA[	
	var tfConfig = {
		sort: true,
		col_number_format: [null,null,'US','US','US','US','US','US','US'],
		
		alternate_rows: true,
		rows_counter: true,
		rows_counter_text: "Rows: ",
		btn_reset: true,
		btn_reset_text: "Clear",
		status_bar: true,
		fill_slc_on_demand: true,
		paging: true,
		paging_length: 15,
		display_all_text: "[ Clear ]",
		input_watermark: 'Search...',
		enable_empty_option: true,
		enable_non_empty_option: true,
		popup_filters: true,
		/* Custom theme */
		themes: {
			name:['MyTheme'],
			src:['css/MyTheme.css'],
			description:['My stylesheet'],
			initialize:[null]
		}
	}
	var tf = setFilterGrid("users", tfConfig);
//]]>
</script>
</td>
</tr>
</table>
</body>
</html>tooltip.js
$(document).ready(function() {
$('.navigation a').hover(function(e){
//lets show the 'tool tip bubble'
var bubblePosition = $('#response').position();
//set the position where the mouse is location...
var top = e.pageY;
var left = e.pageX;
//You will perform your ajax call here as outlined in the EE post...plus any other modifications you will need...
var compID = $(this).attr('data-id'); //get the ID
$.ajax({
url: "view_details.php",
data: { id : compID },
dataType: 'html',
success: function(data) {
$('#response').html(data);
//show the bubble with the correct position...
$('#response').css({
top: top,
left: left,
display: 'inline-block'
});
}
});
}, function(e){
//hide the bubble....
$('#response').css('display', 'none');
})
});view_details.php
<?php
$compID = $_GET['id'];
	$con = mysql_connect("localhost","root","pass");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db('flight_track');
$query = mysql_query("SELECT * FROM flight_track where id = '$compID'") or die (mysql_error());
$row_main = mysql_fetch_assoc($query);
$body = $row_main['information'];
echo $body;
?>
Not sure if minor structural errors could be the problem (probably not), but it is worth a try:
add quotes in line 108
add quotes in line 108
echo "<a href='test.php' data-id='$id'>Details</a>";ASKER
Still get no pop up.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Had to put <script src="scripts/jquery.js" language="javascript" type="text/javascript"></s
ASKER
.navigation a{
text-decoration: none;
color: #CCC;
line-height: 2em;
border-bottom: 1px dashed #CCC;
}
.navigation a:hover{
color: #000;
border-bottom: 1px dashed #000;
}
#response{
border: 1px solid #333;
border-radius: 5px;
background-color: #FFF;
display: none;
position: absolute;
z-index: 1000;
padding-left: .8em;
padding-right: .8em;
padding-top: .5em;
padding-bottom: .5em;
box-shadow: 2px 2px 2px 2px #ccc;
}