PDA

Click to See Complete Forum and Search --> : Problem outputting data into tables

scottyrob
12-21-2006, 04:54 PM
Hi there. I have two pages,

www.loddonexplorers.co.uk/Design/ProgramDiary.php
www.loddonexplorers.co.uk/Design/ProgramDiary1.php

The problem lyes on the second page. I am trying to output the data into tables, but when i do it seems to loose its show/hide function! Any ideas?

Cheers,
Scott

ProgramDiary.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Leaders</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
body {
font:14px Arial, Helvetica, sans-serif;
}
.details {
display: none;
font-size:12px;
}
.red_title{
font:20pt Arial;
font-weight:normal;
color:#f00;
}
.button {
background-image: url("Plus.gif");
width: 10px;
height: 9px;
display:block;
float: left;
margin-right: 5px;
margin-top: 2px;
}
</style>

<script type="text/javascript">
function showDetails(memberID,button){
var element = document.getElementById(memberID);
if(element.style.display != 'block'){
element.style.display = 'block';
button.style.backgroundImage = 'url("Minus.gif")';
}else{
element.style.display = 'none';
button.style.backgroundImage = 'url("Plus.gif")';
}
}
</script>
<noscript>
<style type="text/css">
.details {
display: block;
}
</style>
</noscript>
</head>
<body>
<blockquote>
<?php

require("DbConnect.php");

$result = @mysql_query('SELECT * FROM `tblActivities` GROUP BY `Activity_ID`');
if (!$result) {
exit('<p>Error performing query: ' . mysql_error() . '</p>');
}
$num = mysql_num_rows($result);
echo "<div id=\"alldetails\">";
for ($i=0; $i<$num; $i++)
{
$row = mysql_fetch_assoc($result);

echo "\n<p><input type=\"image\" class=\"button\" id=\"button$i\" value=\" \" onclick=\"showDetails('person$i',this);return true;\"> $row[Activity_Venue] </p>\n";

$text = <<<END
<p id="person%s" class="details">
Name: %s <br>
Date: %s <br>
Time: %s <br>
PC Form: %s<br>
Venue: %s<br>
Lead Explorer: %s<br>
Adult Leader: %s<br>
Activity Type: %s</p>
END;

printf(
$text,
$i,
$row['Activity_Name'],
($row['Activity_Start_Date'] == $row['Activity_End_Date']) ?
$row['Activity_Start_Date'] :
$row['Activity_Start_Date']." - ".$row['Activity_End_Date'],
($row['Activity_Start_Time'] == $row['Activity_End_Time']) ?
$row['Activity_Start_Time'] :
$row['Activity_Start_Time']." - ".$row['Activity_End_Time'],
$row['Activity_PCForm'],
$row['Activity_Venue'],
$row['Activity_Lead_Explorer'],
$row['Activity_Leader'],
$row['Activity_Type']
);
};
echo "</div>\n";

?>
</blockquote>

</body>
</html>


(The ONLY change here is that im now using a table instead)
ProgramDiary1.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Leaders</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
body {
font:14px Arial, Helvetica, sans-serif;
}
.details {
display: none;
font-size:12px;
}
.red_title{
font:20pt Arial;
font-weight:normal;
color:#f00;
}
.button {
background-image: url("Plus.gif");
width: 10px;
height: 9px;
display:block;
float: left;
margin-right: 5px;
margin-top: 2px;
}
</style>

<script type="text/javascript">
function showDetails(memberID,button){
var element = document.getElementById(memberID);
if(element.style.display != 'block'){
element.style.display = 'block';
button.style.backgroundImage = 'url("Minus.gif")';
}else{
element.style.display = 'none';
button.style.backgroundImage = 'url("Plus.gif")';
}
}
</script>
<noscript>
<style type="text/css">
.details {
display: block;
}
</style>
</noscript>
</head>
<body>
<blockquote>
<?php

require("DbConnect.php");

$result = @mysql_query('SELECT * FROM `tblActivities` GROUP BY `Activity_ID`');
if (!$result) {
exit('<p>Error performing query: ' . mysql_error() . '</p>');
}
$num = mysql_num_rows($result);
echo "<div id=\"alldetails\">";
for ($i=0; $i<$num; $i++)
{
$row = mysql_fetch_assoc($result);

echo "\n<p><input type=\"image\" class=\"button\" id=\"button$i\" value=\" \" onclick=\"showDetails('person$i',this);return true;\"> $row[Activity_Venue] </p>\n";

$text = <<<END
<p id="person%s" class="details">
<table width="200" border="1">
<tr>
<td>Name:</td>
<td>%s</td>
</tr>
<tr>
<td>Date:</td>
<td>%s</td>
</tr>
<tr>
<td>Time:</td>
<td>%s</td>
</tr>
<tr>
<td>PC Form:</td>
<td>%s</td>
</tr>
<tr>
<td>Venue:</td>
<td>%s</td>
</tr>
<tr>
<td>Lead Explorer:</td>
<td>%s</td>
</tr>
<tr>
<td>Adult Leader:</td>
<td>%s</td>
</tr>
<tr>
<td>Activity Type:</td>
<td>%s</td>
</tr>
</table>
END;

printf(
$text,
$i,
$row['Activity_Name'],
($row['Activity_Start_Date'] == $row['Activity_End_Date']) ?
$row['Activity_Start_Date'] :
$row['Activity_Start_Date']." - ".$row['Activity_End_Date'],
($row['Activity_Start_Time'] == $row['Activity_End_Time']) ?
$row['Activity_Start_Time'] :
$row['Activity_Start_Time']." - ".$row['Activity_End_Time'],
$row['Activity_PCForm'],
$row['Activity_Venue'],
$row['Activity_Lead_Explorer'],
$row['Activity_Leader'],
$row['Activity_Type']
);
};
echo "</div>\n";

?>
</blockquote>

</body>
</html>
coppocks
12-21-2006, 06:08 PM
I had similar problems trying to toggle an iframe and a table, so I switched to this code and it worked, and I could not begin to say why... calling a className vs calling the ID directly.... here's an example...

<style>
.Cal{
display: none;
}
.Cal2
{
display: block;
}
</style>
<script type="text/javascript">
function showCal() {
var e = document.getElementById("Cal");
if (e.className=="Cal") {
e.className = "Cal2";
}
else if (e.className=="Cal2") {
e.className = "Cal";
}
}
</script>

See if a similar implementation will work for you.