Solved

Javascript popup with database data using PHP not working correctly

Posted on 2007-03-30
3
931 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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

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…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

760 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now