JQuery 'Reply' hyperlink in PHP while loop

Question

I have a simple PHP while loop which executes a list of tabular comments/posts from the SQL database. Each post has a reply hyperlink that that will open a textarea (form) below the post which will allow the user to reply to that specific post. It works fine for one post, but when there are multiple posts the jQuery opens all of the textareas for each post. I assume that this is an issue with me calling identical classes using jQuery. But I am not sure how to deal with it. What I would like to achieve is allowing the user to click on a reply hyperlink within a specific post and only that textarea will appear underneath and not all of them at the same time.

Here is the PHP code to generate the list of posts with the reply feature.

<?php>

echo "<table width=\"100%\" border=\"0\" cellspacing=\"10\">";

while ($row2 = mysql_fetch_assoc($res)) 
{

echo "
   <tr>
   <td>
      <span class=\"anonname\">Anon" . $row2['uid'] . " </span> 
      <span class=\"smalltext\"> says:</span>
   </td>
   </tr>
   <tr>
   <td>
      <span class=\"messagetext\">" . $row2['msg'] . "</span></td>
   </tr>
   <tr>
   <td>
       <div class=\"replystyle\"><span class=\"replytext\"><a href=\"#\"  
       class=\"replybtn\">Reply</a> &#8901; <a href=\"#\">Like</a> </span> <span              
       class=\"replytext\" style=\"float:right;\"><span class=\"timetext\">" .         
       $row2['timestamp'] . "</span><a href=\"report.html\">Report</a></span></div>
   </td>
   </tr>
   <tr>
   <td>
       <div id=\"replymsgbox\">
       <form id=\"messaging\" action=\"\" method=\"post\" accept-charset=\"UTF-8\"> 
       <div class=\"tarea\">
       <textarea name=\"message\" rows=\"2\" class=\"txtbx\"></textarea>
       </div>
   <span style=\"float:right;\"><input name=\"submit\" class=\"signupbtn\"          
       type=\"submit\" value=\"share\" /></span><br/><br/>
       </form>
   </div>
  </td>
  </tr>";
}
       echo "</table>";
}
?>

Here is the jQuery

<script language="javascript" type="text/javascript"> 
  $(document).ready(function(){
            $('.replymsgbox').hide();
    $('.replybtn').click(function(){
    $('.replymsgbox').slideToggle('fast');
       });
       });
</script>

Any help would be appreciated.

Oh man. You might consider using a template system (e.g., [TWIG](http://twig.sensiolabs.org/)) so you don't have to make a mess of your html (escaping every quote, etc). It will make it easier to manage/debug, too. — BryanH, Sep 18 '12 at 22:39

score 2 · Accepted Answer · answered Sep 18 '12 at 22:39

2

With $('.replymsgbox') selector, you are getting all the element having such class.

To get just the one related to the button, use:

$('.replybtn').click(function(){
    $('.replymsgbox', $(this).parent().parent().next()).slideToggle('fast');
});

You are narrowing research of a .replymsgbox element inside next <tr> this way.

answered Sep 18 '12 at 22:39

moonwave99

21,957
3
43
64

Hey @moonwave99, I've tried your solution and now the textarea is not toggling. It doesn't open at all, is it targeting the correct element? Thanks for your help btw. – Raja Sep 18 '12 at 23:12
I missed a `.parent()` - it's `$('.replymsgbox', $(this).parent().parent().parent().next()).slideToggle('fast');`. – moonwave99 Sep 18 '12 at 23:16
I think you also missed an extra one :) it worked when I included the fifth parent (I'm not sure if that is normal to have so many but I'm still learning :)). But obviously you put me on the right track and answered my question. Thank you very much for taking your time to help me out. It is much appreciated. Happy coding! – Raja Sep 18 '12 at 23:21
It's not "normal" of course :)) - to get it shorter you must change a bit your markup, but you'll learn this by practicing - feel free to ask back here on SO when you're stuck! – moonwave99 Sep 19 '12 at 01:00

score 1 · Answer 2 · answered Sep 18 '12 at 22:48

(This isn't an answer, just an observation; comments don't allow such formatting)

This is what I wrote about in my comment to your question:

<table width="100%" border="0" cellspacing="10">
<?php
while ($row2 = mysql_fetch_assoc($res)) {
?>    
   <tr>
   <td>
      <span class="anonname">Anon<?php echo $row2['uid'];?></span> 
      <span class="smalltext"> says:</span>
   </td>
   </tr>
   <tr>
   <td>
      <span class="messagetext"><?php echo $row2['msg']; ?></span></td>
   </tr>
   <tr>
   <td>
       <div class="replystyle"><span class="replytext"><a href="#"  
       class="replybtn">Reply</a> &#8901; <a href="#">Like</a> </span> 
       <span class="replytext" style="float:right;"><span 
       class="timetext"><?php echo $row2['timestamp']; ?></span><a 
       href="report.html">Report</a></span></div>
   </td>
   </tr>
   <tr>
   <td>
       <div id="replymsgbox">
       <form id="messaging" action="" method="post" accept-charset="UTF-8"> 
       <div class="tarea">
         <textarea name="message"rows="2" class="txtbx"></textarea>
       </div>
       <span style="float:right;"><input name="submit" class="signupbtn"          
       type="submit" value="share" /></span><br/><br/>
       </form>
   </div>
  </td>
  </tr>
<?php } ?>
</table>

See how that cleans up much better? Now if you want to make changes to your HTML, you don't have to through all the complex escaping machinations.

Awesome! Thanks for the advice @BryanH I'll look into the TWIG template system. If it can make my workflow smoother it can only be a good thing. Also that true, the escaping can be a pain :) Thanks for that — Raja, Sep 18 '12 at 23:11

JQuery 'Reply' hyperlink in PHP while loop

2 Answers2