Javascript toggle div problems

Ryoushi

03-11-2009, 05:18 PM

So, I'm not sure exactly where to ask this, but I've been wrestling with this for a week and I need help.

I've been using javascript to toggle divs created for displaying user-generated content pulled from a database. However, only the first div is diplayed when the toggle link is clicked, even for the 2nd, 3rd, 4th, etc. (link here (http://ryoushi.comyr.com/viewguardians.php)).

The source code viewed in the browser indicates that the information IS being called and the divs ARE being created.

I think the reason the script is only working for the first div is because the IDs are not unique, since they are created via a loop. However, I'm not sure how I can get around this. I've done tons of searching, but I can't quite find the answer.

Here is my code (edited out personal info).
<html>
<head>
<title>View Guardians Characters</title>
<link href="style.css" type="text/css" rel="stylesheet" />

<script type="text/javascript">

</script>

</head>
<body>
<?php
$username="username";
$password="password";
$database="database";

mysql_connect("host here",$username,$password);
@mysql_select_db($database) or die( "Unable to select database");
$query="SELECT * FROM Guardians ORDER BY faction";
$result=mysql_query($query);

$num=mysql_numrows($result);

mysql_close();
?>

<table border="0" cellspacing="2" cellpadding="2">
<tr>
<th>Characters (ordered by Faction)</th>
</tr>

<?php
$i=0;
while ($i < $num) {

$firstname=mysql_result($result,$i,"name_first");
$lastname=mysql_result($result,$i,"name_last");
$sex=mysql_result($result,$i,"sex");
$race=mysql_result($result,$i,"race");
$primary=mysql_result($result,$i,"primary");
$primaryother=mysql_result($result,$i,"primaryother");
$secondary=mysql_result($result,$i,"secondary");
$secondaryother=mysql_result($result,$i,"secondaryother");
$weaponpref=mysql_result($result,$i,"weapon_preferred");
$channel=mysql_result($result,$i,"weapon_channel");
$power=mysql_result($result,$i,"power_scale");
$faction=mysql_result($result,$i,"faction");
$factionother=mysql_result($result,$i,"factionother");
$rank=mysql_result($result,$i,"rank");
$genetic=mysql_result($result,$i,"appearance_genetic");
$modified=mysql_result($result,$i,"appearance_modified");
$ref=mysql_result($result,$i,"ref_sheet");
$personality=mysql_result($result,$i,"personality");
$esteem=mysql_result($result,$i,"esteem");
$strength=mysql_result($result,$i,"strength");
$weakness=mysql_result($result,$i,"weakness");
$events=mysql_result($result,$i,"events");
$decisions=mysql_result($result,$i,"decisions");
$drive=mysql_result($result,$i,"drive");

?>

<tr>
<td>
<?php echo $firstname; ?> <?php echo $lastname; ?>
 
<a href="javascript:;" onmousedown="toggle_visibility('div1');">Details</a>
 
<div id="div1" style="display: none; overflow: hidden; text-align: left;">
<?php echo $race; ?>
 
Faction: <?php echo $faction; ?>
 
Rank: <?php echo $rank; ?>
 
<?php echo $sex; ?>
 
 
Primary Power: <?php echo $primary; ?>
 
Other (if applicable): <?php echo $primaryother; ?>
 
 
Secondary Power: <?php echo $secondary; ?>
 
Other (if applicable): <?php echo $secondaryother; ?>
 
 
Power Level: <?php echo $power; ?>
 
 
Genetic Appearance:
 
<?php echo $genetic; ?>
 
 
Modified Appearance:
 
<?php echo $modified; ?>
 
 
Personality:
 
<?php echo $personality; ?>
 
 
Self Opinion:
 
<?php echo $esteem; ?>
 
 
Strengths:
 
<?php echo $strength; ?>
 
 
Weaknesses:
 
<?php echo $weakness; ?>
 
 
Defining Events:
 
<?php echo $events; ?>
 
 
Important Decisions to Make/Have Made:
 
<?php echo $decisions; ?>
 
 
Inner Drive:
 
<?php echo $drive; ?>
 
 
</div>
</td>
</tr>

<?php
$i++;
}
?>
</body>
</html>

abduraooft

03-11-2009, 05:27 PM

Validate your code (http://validator.w3.org/#validate_by_input) and fix all errors in your markup, if any. You can't have the same id for multiple elements.

If the above doesn't work, post your parsed html output taken from browser's view source option,

Ryoushi

03-11-2009, 08:53 PM

I ran the code through the validator, and after fixing a few small errors, I am still getting the same result.

I know that I can't have the same id for multiple elements, but by creating the div in a loop (so as to retrieve data from all the current rows), I don't know how I could get the ids to be unique. It seems to me that I'd use a variable to achieve this, but my attempts at trying to make this work have failed badly. It seems like there is something obvious that I'm missing... if you have the solution for how to work around this, please let me know.

Here's the html output.
<html>
<head>
<title>View Guardians Characters</title>
<link href="style.css" type="text/css" rel="stylesheet">

</head>
<body>
<script type="text/javascript">

</script>

<table border="0" cellspacing="2" cellpadding="2">
<tr>
<th>Characters (ordered by Faction)</th>
</tr>

<tr>
<td>
sdfcruuen5 egrfdcvgd 
<a href="javascript:;" onmousedown="toggle_visibility('div1');">Details</a>
 
<div id="div1" style="display: none; overflow: hidden; text-align: left;">
Guardian
 
Faction: Elite Crafters
 
Rank: 5/10
 
Female
 
 
Primary Power: Water
 
Other (if applicable): 
 
 
Secondary Power: None
 
Other (if applicable): 
 
 
Power Level: 12/20
 
 
Genetic Appearance:
 
tyhtrtr 
 
Modified Appearance:
 
tyrhujgftr 
 
Personality:
 
hfyhnt 
 
Self Opinion:
 
rtggddf 
 
Strengths:
 
ghsdgtdfer 
 
Weaknesses:
 
dgrtrthd 
 
Defining Events:
 
gdgdtregs 
 
Important Decisions to Make/Have Made:
 
argdfrtg 
 
Inner Drive:
 
seftdsgfyt 
 
</div>
</td>
</tr>

<tr>
<td>
Rhydian Colburn 
<a href="javascript:;" onmousedown="toggle_visibility('div1');">Details</a>
 
<div id="div1" style="display: none; overflow: hidden; text-align: left;">
Guardian
 
Faction: Exile
 
Rank: 10/10 Leader
 
Male
 
 
Primary Power: Storms
 
Other (if applicable): 
 
 
Secondary Power: Fear
 
Other (if applicable): 
 
 
Power Level: 17/20
 
 
Genetic Appearance:
 
Golden hair, to the top of his butt kept in a low ponytail. Onyx eyes. Pale skin. 
 
Modified Appearance:
 
Scar across his right cheek. 
 
Personality:
 
Behavioral tendencies, thought processes, etc.
 
 
Self Opinion:
 
How they think of themselves, etc.
 
 
Strengths:
 
Strengths (both mental & physical)
 
 
Weaknesses:
 
Weaknesses (both mental & physical)
 
 
Defining Events:
 
Important defining moments of their past.
 
 
Important Decisions to Make/Have Made:
 
Important decisions they have made or will have to make in the future.
 
 
Inner Drive:
 
What drives this character to keep on going (revenge, faith, love, thirst for power, etc.)
 
 
</div>
</td>
</tr>

<tr>
<td>
Mizuka 
<a href="javascript:;" onmousedown="toggle_visibility('div1');">Details</a>
 
<div id="div1" style="display: none; overflow: hidden; text-align: left;">
Guardian
 
Faction: Guardians of Light
 
Rank: 10/10 Leader
 
Female
 
 
Primary Power: Light
 
Other (if applicable): 
 
 
Secondary Power: Life
 
Other (if applicable): 
 
 
Power Level: 18/20
 
 
Genetic Appearance:
 
She has dark brown, almost black hair that is wavy and falls about mid-back. Her eyes are sapphire colored. She is very white in color. 
 
Modified Appearance:
 
She has a scar on her chest near her heart from a stab wound, and a scar on her left thigh left from a gash.
 
 
Personality:
 
Mizuka is very serious about her duties as a Guardian of Light. Because of this, she treats even her enemies with great compassion and understanding, but wields a fierce power when it is needed. As she is so old now and widely renowned, she doesn't have much need for showing off her power anymore. Most people do as she says. She doesn't place much value on her own life, and so is willing to give it up to serve her purpose, should the time (or person) come. 
 
Self Opinion:
 
She is very nuetral in how she thinks of herself. When she was younger she worried about such things, but she doesn't feel it really matters much anymore. 
 
Strengths:
 
She has great strength when it comes to calming others, and reliving them of their pain. She is also good at protecting others, when the need arises. 
 
Weaknesses:
 
Mizuka is very reluctant to kill, and has only done so twice in all of her existance. Therefore, if her opponent is intent on the kill and won't back down, she is at a disadvantage. She prefers to banish people then kill them, but more than once these people have gained power in exile, and returned for vengence, wreaking havoc. 
 
Defining Events:
 
The greatest difining moment in her past was when the previous ruler os the Guardians of Light, her father, gave his life to a human girl, that she would have the Guardians' long life and power in his place. While she knew that her job was to protect humans, she hadn't quite realized the true weight of protecting their future until then. 
 
Important Decisions to Make/Have Made:
 
She decided to, like her father, when the time came, to give her life-stone to a human. Not just any human, but one who's existance was important to keeping the peace among their peoples, in the time of the fading Guardians. 
 
Inner Drive:
 
The desire to protect, and to love, keeps her going. She feels that only she can keep that titans from clashing and taking life. 
 
</div>
</td>
</tr>

<tr>
<td>
sdfgdtr egrfdcvfdgsf 
<a href="javascript:;" onmousedown="toggle_visibility('div1');">Details</a>
 
<div id="div1" style="display: none; overflow: hidden; text-align: left;">
Guardian
 
Faction: Knowledge Seekers
 
Rank: 3/10
 
Female
 
 
Primary Power: Water
 
Other (if applicable): 
 
 
Secondary Power: Illusion
 
Other (if applicable): 
 
 
Power Level: 7/20
 
 
Genetic Appearance:
 
tyhtrtr 
 
Modified Appearance:
 
tyrhujgftr 
 
Personality:
 
hfyhnt 
 
Self Opinion:
 
rtggddf 
 
Strengths:
 
ghsdgtdfer 
 
Weaknesses:
 
dgrtrthd 
 
Defining Events:
 
gdgdtregs 
 
Important Decisions to Make/Have Made:
 
argdfrtg 
 
Inner Drive:
 
seftdsgfyt 
 
</div>
</td>
</tr>

<tr>
<td>
gfdtbyt trg6 
<a href="javascript:;" onmousedown="toggle_visibility('div1');">Details</a>
 
<div id="div1" style="display: none; overflow: hidden; text-align: left;">
Human
 
Faction: None
 
Rank: 0 (No Faction)
 
Male
 
 
Primary Power: None
 
Other (if applicable): 
 
 
Secondary Power: None
 
Other (if applicable): 
 
 
Power Level: 1/20
 
 
Genetic Appearance:
 
Genetic appearence (hair, eyes, body type, markings, etc.)
 
 
Modified Appearance:
 
Modified appearence (tattoos, piercings (ethnic reasons only), scars, etc.)
 
 
Personality:
 
Behavioral tendencies, thought processes, etc.
 
 
Self Opinion:
 
How they think of themselves, etc.
 
 
Strengths:
 
Strengths (both mental & physical)
 
 
Weaknesses:
 
Weaknesses (both mental & physical)
 
 
Defining Events:
 
Important defining moments of their past.
 
 
Important Decisions to Make/Have Made:
 
Important decisions they have made or will have to make in the future.
 
 
Inner Drive:
 
What drives this character to keep on going (revenge, faith, love, thirst for power, etc.)
 
 
</div>
</td>
</tr>
</table>
</body>
</html>

Thank you so much for helping me with this.

Henley

03-11-2009, 09:01 PM

This is a PHP problem.

Post your code and question in the PHP forum. The good people there will show you how to, within the PHP loop that creates the DIVs, assign unique IDs to each.

The JavaScript you posted will then work.

Ryoushi

03-11-2009, 09:59 PM

Thank you for pointing me in the right direction.