Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    5
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Javascript toggle div problems

    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).

    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).
    Code:
    <html>
    <head>
    <title>View Guardians Characters</title>
    <link href="style.css" type="text/css" rel="stylesheet" />
    <!-- <script language="JavaScript" src="motionpack.js"></script> -->
    <script type="text/javascript">
    <!--
        function toggle_visibility(id) {
           var e = document.getElementById(id);
           if(e.style.display == 'block')
              e.style.display = 'none';
           else
              e.style.display = 'block';
        }
    //-->
    </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; ?>
    <br />
    <a href="javascript:;" onmousedown="toggle_visibility('div1');">Details</a>
    <br>
    <div id="div1" style="display: none; overflow: hidden; text-align: left;">
    <i><?php echo $race; ?></i>
    <br />
    Faction: <i><?php echo $faction; ?></i>
    <br />
    Rank: <i><?php echo $rank; ?></i>
    <br />
    <i><?php echo $sex; ?></i>
    <br />
    <br />
    Primary Power: <i><?php echo $primary; ?></i>
    <br />
    Other (if applicable): <i><?php echo $primaryother; ?></i>
    <br />
    <br />
    Secondary Power: <i><?php echo $secondary; ?></i>
    <br />
    Other (if applicable): <i><?php echo $secondaryother; ?></i>
    <br />
    <br />
    Power Level: <i><?php echo $power; ?></i>
    <br />
    <br />
    Genetic Appearance:
    <br />
    <?php echo $genetic; ?>
    <br />
    <br />
    Modified Appearance:
    <br />
    <?php echo $modified; ?>
    <br />
    <br />
    Personality:
    <br />
    <?php echo $personality; ?>
    <br />
    <br />
    Self Opinion:
    <br />
    <?php echo $esteem; ?>
    <br />
    <br />
    Strengths:
    <br />
    <?php echo $strength; ?>
    <br />
    <br />
    Weaknesses:
    <br />
    <?php echo $weakness; ?>
    <br />
    <br />
    Defining Events:
    <br />
    <?php echo $events; ?>
    <br />
    <br />
    Important Decisions to Make/Have Made:
    <br />
    <?php echo $decisions; ?>
    <br />
    <br />
    Inner Drive:
    <br />
    <?php echo $drive; ?>
    <br />
    <br />
    </div>
    </td>
    </tr>
    
    <?php
    $i++;
    }
    ?>
    </body>
    </html>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Validate your code 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,
    Last edited by abduraooft; 03-12-2009 at 08:14 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Ryoushi (03-11-2009)

  • #3
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    5
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.
    Code:
    <html>
    <head>
    <title>View Guardians Characters</title>
    <link href="style.css" type="text/css" rel="stylesheet">
    <!-- <script language="JavaScript" src="motionpack.js"></script> -->
    </head>
    <body>
    <script type="text/javascript">
    <!--
        function toggle_visibility(id) {
           var e = document.getElementById(id);
           if(e.style.display == 'block')
              e.style.display = 'none';
           else
              e.style.display = 'block';
        }
    //-->
    </script>
    
    <table border="0" cellspacing="2" cellpadding="2">
    <tr>
    <th>Characters (ordered by Faction)</th>
    </tr>
    
    
    <tr>
    <td>
    sdfcruuen5 egrfdcvgd<br />
    <a href="javascript:;" onmousedown="toggle_visibility('div1');">Details</a>
    <br>
    <div id="div1" style="display: none; overflow: hidden; text-align: left;">
    <i>Guardian</i>
    <br />
    Faction: <i>Elite Crafters</i>
    <br />
    Rank: <i>5/10</i>
    <br />
    <i>Female</i>
    <br />
    <br />
    Primary Power: <i>Water</i>
    <br />
    Other (if applicable): <i></i>
    <br />
    <br />
    Secondary Power: <i>None</i>
    <br />
    Other (if applicable): <i></i>
    <br />
    <br />
    Power Level: <i>12/20</i>
    <br />
    <br />
    Genetic Appearance:
    <br />
    tyhtrtr<br />
    <br />
    Modified Appearance:
    <br />
    tyrhujgftr<br />
    <br />
    Personality:
    <br />
    hfyhnt<br />
    <br />
    Self Opinion:
    <br />
    rtggddf<br />
    <br />
    Strengths:
    <br />
    ghsdgtdfer<br />
    <br />
    Weaknesses:
    <br />
    dgrtrthd<br />
    <br />
    Defining Events:
    <br />
    gdgdtregs<br />
    <br />
    Important Decisions to Make/Have Made:
    <br />
    argdfrtg<br />
    <br />
    Inner Drive:
    <br />
    seftdsgfyt<br />
    <br />
    </div>
    </td>
    </tr>
    
    <tr>
    <td>
    Rhydian Colburn<br />
    <a href="javascript:;" onmousedown="toggle_visibility('div1');">Details</a>
    <br>
    <div id="div1" style="display: none; overflow: hidden; text-align: left;">
    <i>Guardian</i>
    <br />
    Faction: <i>Exile</i>
    <br />
    Rank: <i>10/10 Leader</i>
    <br />
    <i>Male</i>
    <br />
    <br />
    Primary Power: <i>Storms</i>
    <br />
    Other (if applicable): <i></i>
    <br />
    <br />
    Secondary Power: <i>Fear</i>
    <br />
    Other (if applicable): <i></i>
    <br />
    <br />
    Power Level: <i>17/20</i>
    <br />
    <br />
    Genetic Appearance:
    <br />
    Golden hair, to the top of his butt kept in a low ponytail. Onyx eyes. Pale skin.<br />
    <br />
    Modified Appearance:
    <br />
    Scar across his right cheek.<br />
    <br />
    Personality:
    <br />
    Behavioral tendencies, thought processes, etc.
    <br />
    <br />
    Self Opinion:
    <br />
    How they think of themselves, etc.
    <br />
    <br />
    Strengths:
    <br />
    Strengths (both mental & physical)
    <br />
    <br />
    Weaknesses:
    <br />
    Weaknesses (both mental & physical)
    <br />
    <br />
    Defining Events:
    <br />
    Important defining moments of their past.
    <br />
    <br />
    Important Decisions to Make/Have Made:
    <br />
    Important decisions they have made or will have to make in the future.
    <br />
    <br />
    Inner Drive:
    <br />
    What drives this character to keep on going (revenge, faith, love, thirst for power, etc.)
    <br />
    <br />
    </div>
    </td>
    </tr>
    
    <tr>
    <td>
    Mizuka <br />
    <a href="javascript:;" onmousedown="toggle_visibility('div1');">Details</a>
    <br>
    <div id="div1" style="display: none; overflow: hidden; text-align: left;">
    <i>Guardian</i>
    <br />
    Faction: <i>Guardians of Light</i>
    <br />
    Rank: <i>10/10 Leader</i>
    <br />
    <i>Female</i>
    <br />
    <br />
    Primary Power: <i>Light</i>
    <br />
    Other (if applicable): <i></i>
    <br />
    <br />
    Secondary Power: <i>Life</i>
    <br />
    Other (if applicable): <i></i>
    <br />
    <br />
    Power Level: <i>18/20</i>
    <br />
    <br />
    Genetic Appearance:
    <br />
    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.<br />
    <br />
    Modified Appearance:
    <br />
    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.
    <br />
    <br />
    Personality:
    <br />
    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.<br />
    <br />
    Self Opinion:
    <br />
    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.<br />
    <br />
    Strengths:
    <br />
    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.<br />
    <br />
    Weaknesses:
    <br />
    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.<br />
    <br />
    Defining Events:
    <br />
    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.<br />
    <br />
    Important Decisions to Make/Have Made:
    <br />
    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.<br />
    <br />
    Inner Drive:
    <br />
    The desire to protect, and to love, keeps her going. She feels that only she can keep that titans from clashing and taking life.<br />
    <br />
    </div>
    </td>
    </tr>
    
    <tr>
    <td>
    sdfgdtr egrfdcvfdgsf<br />
    <a href="javascript:;" onmousedown="toggle_visibility('div1');">Details</a>
    <br>
    <div id="div1" style="display: none; overflow: hidden; text-align: left;">
    <i>Guardian</i>
    <br />
    Faction: <i>Knowledge Seekers</i>
    <br />
    Rank: <i>3/10</i>
    <br />
    <i>Female</i>
    <br />
    <br />
    Primary Power: <i>Water</i>
    <br />
    Other (if applicable): <i></i>
    <br />
    <br />
    Secondary Power: <i>Illusion</i>
    <br />
    Other (if applicable): <i></i>
    <br />
    <br />
    Power Level: <i>7/20</i>
    <br />
    <br />
    Genetic Appearance:
    <br />
    tyhtrtr<br />
    <br />
    Modified Appearance:
    <br />
    tyrhujgftr<br />
    <br />
    Personality:
    <br />
    hfyhnt<br />
    <br />
    Self Opinion:
    <br />
    rtggddf<br />
    <br />
    Strengths:
    <br />
    ghsdgtdfer<br />
    <br />
    Weaknesses:
    <br />
    dgrtrthd<br />
    <br />
    Defining Events:
    <br />
    gdgdtregs<br />
    <br />
    Important Decisions to Make/Have Made:
    <br />
    argdfrtg<br />
    <br />
    Inner Drive:
    <br />
    seftdsgfyt<br />
    <br />
    </div>
    </td>
    </tr>
    
    <tr>
    <td>
    gfdtbyt trg6<br />
    <a href="javascript:;" onmousedown="toggle_visibility('div1');">Details</a>
    <br>
    <div id="div1" style="display: none; overflow: hidden; text-align: left;">
    <i>Human</i>
    <br />
    Faction: <i>None</i>
    <br />
    Rank: <i>0 (No Faction)</i>
    <br />
    <i>Male</i>
    <br />
    <br />
    Primary Power: <i>None</i>
    <br />
    Other (if applicable): <i></i>
    <br />
    <br />
    Secondary Power: <i>None</i>
    <br />
    Other (if applicable): <i></i>
    <br />
    <br />
    Power Level: <i>1/20</i>
    <br />
    <br />
    Genetic Appearance:
    <br />
    Genetic appearence (hair, eyes, body type, markings, etc.)
    <br />
    <br />
    Modified Appearance:
    <br />
    Modified appearence (tattoos, piercings (ethnic reasons only), scars, etc.)
    <br />
    <br />
    Personality:
    <br />
    Behavioral tendencies, thought processes, etc.
    <br />
    <br />
    Self Opinion:
    <br />
    How they think of themselves, etc.
    <br />
    <br />
    Strengths:
    <br />
    Strengths (both mental & physical)
    <br />
    <br />
    Weaknesses:
    <br />
    Weaknesses (both mental & physical)
    <br />
    <br />
    Defining Events:
    <br />
    Important defining moments of their past.
    <br />
    <br />
    Important Decisions to Make/Have Made:
    <br />
    Important decisions they have made or will have to make in the future.
    <br />
    <br />
    Inner Drive:
    <br />
    What drives this character to keep on going (revenge, faith, love, thirst for power, etc.)
    <br />
    <br />
    </div>
    </td>
    </tr>
    </table>
    </body>
    </html>
    Thank you so much for helping me with this.

  • #4
    Banned
    Join Date
    Feb 2009
    Posts
    36
    Thanks
    0
    Thanked 7 Times in 7 Posts
    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.

  • Users who have thanked Henley for this post:

    Ryoushi (03-11-2009)

  • #5
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    5
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thank you for pointing me in the right direction.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •