Javascript not working appropriately in PHP while loop.

[drayarms]

Hello all,

 

I wasn't sure whether to post this problem under this forum or the JS forum, but I figured it would be more appropriate here, since the underlying problem seems to be related to the PHP bit. 

 

So basically here's the situation.  I'm trying to retrieve pictures from a database via a while loop, display these pictures on a page, and under each of the pictures, I want to feature a comment box where users can post comments. I want to make the comment box invisible until the user clicks on a comment link which should tiger and onclick event that makes the box appear and the comment link disappear.  This works only for the first row at the top of the page.  It doesnt work for the rest. When I manually change the display attribute of the comment box div to "block", the div becomes visible for all the rows.  But when I try to use the JS funciton to toogle it from "block" to "none", it only works like I said for one row, the first.  I'm getting the impression after reading on similar problems from other forums that a CSS id can only manipulate a unique element on an HTML page but won't all the comment boxes be considred different instances of the same elements in this case? I'm at a total loss and would appreciate any suggestions.

 

Here is a simplified version of  the while loop that prints out the pictures from the database and the database alongside the comment link and the comment box, and also the CSS that contain the styles of the elements to be manipulated and finally the Javascript that does the magic.

 

 

<?php

while ($row = mysql_fetch_assoc($result)){ 



//Print the data.

          echo "<p id = 'status_stream' >" . $row['data'] . "</p>";


//Print the comment link

echo "<p id = 'comment_stream' onclick = 'show_comment_stream_div()' > <a href = 'javascript:;'> Comments: </a> </p>";

//Print out the comments div.

echo " <div id = 'comment_stream_div' onmouseover = 'show_close_comment_stream_div()' onmouseout = 'hide_close_comment_stream_div()'> <p id = 'close_comment_stream_div' onclick = 'hide_comment_stream_div()'> <a> X </a> </p>

    <form action = 'status_comment_entry.php' visibility ='inherit'>

<input id = 'comment_stream_input' type = 'textarea' rows = '8' cols = '20' value ='' name = 'comment' /> <br/>

<input id = 'comment_stream_submit' type = 'submit' value = 'submit!' name = 'submit' />

    </form>

</div>";



}//End of while loop

?>











#comment_stream
{position:relative;bottom:70px;left:230px; color:#2d73b9; display:block;}


#comment_stream_div
{position:relative;bottom:67px;left:121px; width:240px; height:75px; border-style:solid; border-width:1px; border-color:#c0c0c0; display:block;}















<script  type='text/javascript'>

        function show_comment_stream_div() {
           if(document.getElementById('comment_stream_div').style.display = 'none')  
             {document.getElementById('comment_stream_div').style.display = 'block';} else 
             {document.getElementById('comment_stream_div').style.display = 'block';}

   if(document.getElementById('comment_stream').style.display = 'block')
             {document.getElementById('comment_stream').style.display = 'none';} else
             {document.getElementById('comment_stream').style.display = 'none';}

}

</script> 

[trq]

The issue isn't related to either. It's simple html. id attributes must be unique.

[the182guy]

Append the unique picture ID to the comment div ID and when calling the show/hide javascript functions, pass in that ID so the function can tell which comment div to show/hide.