Solved

Javascript popup with database data using PHP not working correctly

Posted on 2007-03-30
3
1,051 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
[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
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

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

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

Suggested Solutions

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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 look for a specific file type in a local or remote server directory using PHP.

738 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