Solved

Javascript popup with database data using PHP not working correctly

Posted on 2007-03-30
3
977 Views
Last Modified: 2012-05-05
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>


0
Comment
Question by:Quetysis
3 Comments
 

Author Comment

by:Quetysis
ID: 18824802
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
 
LVL 19

Accepted Solution

by:
dakyd earned 500 total points
ID: 18824866
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
 
LVL 4

Expert Comment

by:secondv
ID: 18825092
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

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

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…
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
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…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

785 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