?
Solved

Javascript popup with database data using PHP not working correctly

Posted on 2007-03-30
3
Medium Priority
?
1,162 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 2000 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

Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Suggested Courses

752 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