4 Replies - 1414 Views - Last Post: 01 August 2011 - 05:35 PM Rate Topic: -----

#1 drayarms  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 175
  • Joined: 18-May 11

Javascript not working appropriately in PHP while loop.

Posted 01 August 2011 - 02:36 AM

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> 




Is This A Good Question/Topic? 0
  • +

Replies To: Javascript not working appropriately in PHP while loop.

#2 RudiVisser  Icon User is offline

  • .. does not guess solutions
  • member icon

Reputation: 1001
  • View blog
  • Posts: 3,555
  • Joined: 05-June 09

Re: Javascript not working appropriately in PHP while loop.

Posted 01 August 2011 - 02:58 AM

An id attribute can only be used for one element.

Your javascript, when using document.getElementById will be picking out the very first element that it matches, because it's only expecting one.

You should instead try using a class, or even numbering your results, so the IDs are coming out as something like comment_stream_div_1, comment_stream_div_2, etc.

Note that to suit your particular situation, a class would be better. You can then use getElementsByClassName, and related selectors to select out the closest element.

As much as I dislike(/hate) suggesting to use jQuery for something, in your purpose this would actually help you out alot and reduce your code to around 3 lines.

This post has been edited by RudiVisser: 01 August 2011 - 03:00 AM

Was This Post Helpful? 1
  • +
  • -

#3 drayarms  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 175
  • Joined: 18-May 11

Re: Javascript not working appropriately in PHP while loop.

Posted 01 August 2011 - 04:42 PM

@ Rudi, GetElementsByClassName is not a real JS function is it? Don't you have to actually create the function yourself from scratch?

@ Rudi, suppose I follow your first advise and number the results, how would I assign the same style attributes to all those numerous results in a CSS file?
Was This Post Helpful? 0
  • +
  • -

#4 RudiVisser  Icon User is offline

  • .. does not guess solutions
  • member icon

Reputation: 1001
  • View blog
  • Posts: 3,555
  • Joined: 05-June 09

Re: Javascript not working appropriately in PHP while loop.

Posted 01 August 2011 - 05:09 PM

View Postdrayarms, on 02 August 2011 - 12:42 AM, said:

@ Rudi, GetElementsByClassName is not a real JS function is it? Don't you have to actually create the function yourself from scratch?

It's a HTML5 method already implemented in Opera,
Safari, Chrome and Fx - But yes, for IE you'd have to write your own implementation.

View Postdrayarms, on 02 August 2011 - 12:42 AM, said:

@ Rudi, suppose I follow your first advise and number the results, how would I assign the same style attributes to all those numerous results in a CSS file?

In a CSS file, you would use a class to style it. You can of course have both an id and a class attribute on each element, and the class will be used for common styling, whilst the ids will still be used in the Javascript.
Was This Post Helpful? 0
  • +
  • -

#5 CTphpnwb  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 2834
  • View blog
  • Posts: 9,740
  • Joined: 08-August 08

Re: Javascript not working appropriately in PHP while loop.

Posted 01 August 2011 - 05:35 PM

To paraphrase RudiVisser, I don't think you know what PHP or Javascript are. PHP runs on the server and Javascript runs on the browser. It is impossible to have Javascript work in a PHP While Loop or any other kind of PHP loop. If your Javascript isn't working then you need to take a look at the code the browser actually sees and debug that. Then you need to write your PHP code so that it sends the corrected Javascript to the browser.
Was This Post Helpful? 2
  • +
  • -

Page 1 of 1