• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 762
  • Last Modified:

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

<?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">


&#9;&#9;<?php

$LDAPusername = $_SERVER['REMOTE_USER'];

if ($atpos = strpos($LDAPusername , "@")) {
$LDAPusername = substr($username, 0, $atpos);
} else 
{
$LDAPusername = substr(strrchr($LDAPusername, '\\'), 1);
}

&#9;$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";

&#9;$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;">
&#9;&#9;&#9;&#9;&#9;<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>";

}
?>


&#9;&#9;&#9;</table>
</div>
<div id="response"></div>
<script language="javascript" type="text/javascript">
//<![CDATA[&#9;
&#9;var tfConfig = {
&#9;&#9;sort: true,
&#9;&#9;col_number_format: [null,null,'US','US','US','US','US','US','US'],
&#9;&#9;
&#9;&#9;alternate_rows: true,
&#9;&#9;rows_counter: true,
&#9;&#9;rows_counter_text: "Rows: ",
&#9;&#9;btn_reset: true,
&#9;&#9;btn_reset_text: "Clear",
&#9;&#9;status_bar: true,
&#9;&#9;fill_slc_on_demand: true,
&#9;&#9;paging: true,
&#9;&#9;paging_length: 15,
&#9;&#9;display_all_text: "[ Clear ]",
&#9;&#9;input_watermark: 'Search...',
&#9;&#9;enable_empty_option: true,
&#9;&#9;enable_non_empty_option: true,
&#9;&#9;popup_filters: true,
&#9;&#9;/* Custom theme */
&#9;&#9;themes: { 
&#9;&#9;&#9;name:['MyTheme'], 
&#9;&#9;&#9;src:['css/MyTheme.css'], 
&#9;&#9;&#9;description:['My stylesheet'], 
&#9;&#9;&#9;initialize:[null]
&#9;&#9;}
&#9;}
&#9;var tf = setFilterGrid("users", tfConfig);
//]]>
</script>















</td>
</tr>
</table>
</body>
</html>

Open in new window


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');    
})
});

Open in new window


view_details.php

<?php
$compID = $_GET['id'];


&#9;$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;

?>

Open in new window

0
maximus81
Asked:
maximus81
  • 4
1 Solution
 
maximus81Author Commented:
Here is the CSS

.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;
}
0
 
thehagmanCommented:
Not sure if minor structural errors could be the problem (probably not), but it is worth a try:
add quotes in line 108

echo "<a href='test.php' data-id='$id'>Details</a>";

Open in new window

0
 
maximus81Author Commented:
Still get no pop up.
0
 
maximus81Author Commented:
The reason this was not working was because I was pulling tooltip.js before jquery.js. Its very picky.

This fixed my issue:

<script src="scripts/jquery.js" language="javascript" type="text/javascript"></script>
<script src="scripts/tooltip.js" language="javascript" type="text/javascript"></script>
0
 
maximus81Author Commented:
Had to put <script src="scripts/jquery.js" language="javascript" type="text/javascript"></script> before <script src="scripts/tooltip.js" language="javascript" type="text/javascript"></script>
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now