<?php
while($row=mysqli_fetch_array($run))
{
$comment = $row['comment'];
$username = $row['UserName'];
$userid1 = $row['UserId'];
$date = $row['CDate'];
$ageDate = time_elapsed_string($date);
?>
<div class="jumbotron" style="border:3px solid #2FAB9B; background-color:#68C8C6;">
<div class="row">
<div class="col-md-10">
<?php echo $comment; ?>
</div>
<div class="col-md-2">
<?php echo $ageDate; ?>
</div>
</div>
<br>
<label>Comment by <a href="profile.php?id=<?php echo $userid1; ?>"><?php echo $username; ?></a></span></label><br>
<a id="reply">Reply</a>
<br>
<div style="width:63%; display:none; id="replyForm">
<form action="">
<textarea cols="100" rows="4"></textarea><br>
<button class="btn btn-primary" style="float:right">reply</button>
</form>
</div>
</div>
<script>
$(document).ready(function()
{
$("#reply").click(function()
{
$("#replyForm").show();
});
});
</script>
<?php } ?>
I m making a comment system in which a comments are being displayed with each comment there is a reply link on click on reply link I want to show the reply textbox and button.The code above is not working.
You need to correctly close the style attribute of your div, and use Classes and Attributes for your Javascript selector.
Using Class selectors enable the Javascript to work for multiple rows/records.
The updated Javascript will fetch the value of the data-role attribute, i.e. the unique identifier (in this case the $userid1); and show the appropriate replyForm div.
You also could place the Javascript outside of your loop like so:
<?php
while($row=mysqli_fetch_array($run)){
$comment = $row['comment'];
$username = $row['UserName'];
$userid1 = $row['UserId'];
$date = $row['CDate'];
$ageDate = time_elapsed_string($date);
?>
<div class="jumbotron" style="border:3px solid #2FAB9B; background-color:#68C8C6;">
<div class="row">
<div class="col-md-10">
<?php echo $comment; ?>
</div>
<div class="col-md-2">
<?php echo $ageDate; ?>
</div>
</div>
<br>
<label>Comment by <a href="profile.php?id=<?php echo $userid1; ?>"><?php echo $username; ?></a></span></label><br>
<a class="reply" data-role="<?php echo $userid1; ?>">Reply</a> <!-- Changed ID to Class and added data-role attributes for multiple rows -->
<br>
<div style="width:63%; display:none;" class="replyForm" data-role="<?php echo $userid1; ?>"> <!-- Style attribute closed, changed ID for Class, added data-role attribute -->
<form action="">
<textarea cols="100" rows="4"></textarea><br>
<button class="btn btn-primary" style="float:right">reply</button>
</form>
</div>
</div>
<?php } ?>
<script>
// UPDATED Javascript, using Class & Attribute selector
$(document).ready(function(){
$(".reply").click(function(){
$('.replyForm[data-role="'+$(this).attr("data-role")+'"]').show();
});
});
</script>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments