Javascript popup with database data using PHP not working correctly

Ok, I wanted to have the ability to click a link and get more detail on a person that isn't displayed on my page.  For example their phone and email address.  I was going to use a popup window but then found this really cool popup window on the internet on a site where someone pasted examples for use.

Now here is my problem.  On my page, all of the data changes within the while loop and is displayed correctly.  But my popup window only displays data for the first record.  Any ideas on what is wrong here?  I have a snippet of code below.  I did notice when I viewed the source on the web that the source showed the div data changing and I got different phone numbers and email address and first and last names.  It's just not showing up in the popup window.

<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>Unknown</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ALWAYS ON TOP FLOATING LAYER POP-UP -->

<script language="JavaScript" type="text/javascript">
<!-- Copyright 2003, Sandeep Gangadharan -->
<!--
var y1 = 20;   // change the # on the left to adjuct the Y co-ordinate
(document.getElementById) ? dom = true : dom = false;

function hideIt() {
  if (dom) {document.getElementById("layer1").style.visibility='hidden';}
  if (document.layers) {document.layers["layer1"].visibility='hide';} }

function showIt() {
  if (dom) {document.getElementById("layer1").style.visibility='visible';}
  if (document.layers) {document.layers["layer1"].visibility='show';} }

function placeIt() {
  if (dom && !document.all) {document.getElementById("layer1").style.top = window.pageYOffset + (window.innerHeight - (window.innerHeight-y1))}
  if (document.layers) {document.layers["layer1"].top = window.pageYOffset + (window.innerHeight - (window.innerHeight-y1))}
  if (document.all) {document.all["layer1"].style.top = document.body.scrollTop + (document.body.clientHeight - (document.body.clientHeight-y1));}
  window.setTimeout("placeIt()", 10); }
// -->
</script>

</head>

<body onload="placeIt()" onResize="window.location.href = window.location.href">
<?php
//Query goes here
?>
<table align= 'center' border = '1' style='border-color:black'>
<tr>
  <th></th>
  <th></th>
<?php
while($fieldsarray = mysql_fetch_array($result)) {
?>
 <tr>
           <td>
               <div id="layer<?=$fieldsarray['id']?>" style="position:absolute; left:20; width:410; height:10; visibility:hidden">
                     <font face="verdana, arial, helvetica, sans-serif" size="2">
                           <div style="float:left; background-color:yellow; padding:3px; border:1px solid black">
                           <span style="float:right; background-color:gray; color:white; font-weight:bold; width="20px"; text-align:center; cursor:pointer" onClick="javascript:hideIt()"> X </span>"
                           You can close the window by clicking the <b>X</b> on the top right of this layer." <br><br>
                           <b>Name: </b><?=$fieldsarray['cFirstName']?> &nbsp; <?=$fieldsarray['cLastName']?> <br>
                           <b>Cell: </b><?=$fieldsarray['cCellPhone']?> <br>
                           <b>Email: </b><?=$fieldsarray['cEmail']?> <br>
                           </div>
                     </font>
             </div>
           <a href="javascript:placeIt()" onClick="showIt()">Detail</a>
         </td>
          <td>
         <a href="edit.php?id=<?=$fieldsarray['id']?>">Edit</a>
       </td>
<? } ?>
</body>
</html>


QuetysisAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
dakydConnect With a Mentor Commented:
The script you have is hard-coded to show/hide something with an ID of "layer1".  That happens to be the very first record you display, so that's why it's not working for the other records.  In order to change it, we have to make your javascript functions a little more general, and then change how they're called.  The first part is to pass in the ID for the record that you want to show/hide:

function hideIt(layerNum) {
  if (dom) {document.getElementById("layer" + layerNum).style.visibility='hidden';}
  if (document.layers) {document.layers["layer" + layerNum].visibility='hide';} }

function showIt(layerNum) {
  if (dom) {document.getElementById("layer" + layerNum).style.visibility='visible';}
  if (document.layers) {document.layers["layer" + layerNum].visibility='show';} }

Then, we need to change how the functions are being called.  That actually requires a little bit of help from the PHP, so that the layer number (i.e. the ID that is being passed back in fieldsarray) is passed to the js functions:

<td>
               <div id="layer<?=$fieldsarray['id']?>" style="position:absolute; left:20; width:410; height:10; visibility:hidden">
                     <font face="verdana, arial, helvetica, sans-serif" size="2">
                           <div style="float:left; background-color:yellow; padding:3px; border:1px solid black">
                           <span style="float:right; background-color:gray; color:white; font-weight:bold; width="20px"; text-align:center; cursor:pointer" onClick="javascript:hideIt(<?=$fieldsarray['id']?>)"> X </span>"
                           You can close the window by clicking the <b>X</b> on the top right of this layer." <br><br>
                           <b>Name: </b><?=$fieldsarray['cFirstName']?> &nbsp; <?=$fieldsarray['cLastName']?> <br>
                           <b>Cell: </b><?=$fieldsarray['cCellPhone']?> <br>
                           <b>Email: </b><?=$fieldsarray['cEmail']?> <br>
                           </div>
                     </font>
             </div>
           <a href="javascript:placeIt()" onClick="showIt(<?=$fieldsarray['id']?>)">Detail</a>
         </td>

I don't have PHP installed on my machine here, so there might be a syntax error in the PHP, but I think I got it right.  Regardless, hope that helps.
0
 
QuetysisAuthor Commented:
I don't know if I should place this in the Javascript section or the PHP so I checked both when I submitted the question.
0
 
secondvCommented:
Javascript:

function fetch_id(id)
{
      if (document.getElementById)
      {
            return document.getElementById(id);
      }
      else if (document.all)
      {
            return document.all[id];
      }
      else if (document.layers)
      {
            return document.layers[id];
      }
      return null;
}

function show_hide(id)
{
      var obj = fetch_id(id);

      if (!obj)
      {
            return false;
      }
      obj.style.display = (obj.style.display == 'block') ? 'none' : 'block';
      return true;
}


<td>
<div id="<?php echo $fieldsarray['id']; ?>" style="position: absolute; left: 20; width: 410; height: 10; display: none;">
      <font face="verdana, arial, helvetica, sans-serif" size="2">
      <div style="float: left; background-color: yellow; padding: 3px; border: 1px solid black;">
            <span style="float: right; background-color: gray; color: white; font-weight: bold; width: 20px text-align: center; cursor: pointer" onclick="javascript:show_hide(<?php echo $fieldsarray['id']; ?>);"> X </span> "You can close the window by clicking the <strong>X</strong> on the top right of this layer." <br /><br />
            <strong>Name: </strong><?php echo $fieldsarray['cFirstName']; ?> &nbsp; <?php echo $fieldsarray['cLastName']; ?> <br />
            <strong>Cell: </strong><?php echo $fieldsarray['cCellPhone']; ?> <br />
            <strong>Email: </strong><?php echo $fieldsarray['cEmail']; ?> <br />
      </div>
      </font>
</div>
<a href="#" onclick="javascript:show_hide(<?php echo $fieldsarray['id']; ?>);">Detail</a>
</td>

--

http://scriptgod.com/js.php
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.

All Courses

From novice to tech pro — start learning today.