How to display element just below the specified block - php

Question

I am trying to develop a comment and reply system.
First I fetch all the comments from the database and display it in div with class="comment" . and I set a Reply button for each comment .
Now what I want is if the button is clicked
a reply form should appear .
currently reply form div is set to display:"none"
<div class="row col-md-12"><!--reply system starts here -->
<!--reply form goes here -->
</div>
Below is the whole html
<?php foreach ($comment_res as $comments){ ?>
<div class="comment">
<div class="col-md-12">
<h5>
<?php echo $comments['vname'] ?> <small><button class="replybtn" id="<?php echo $comments['comment_id']; ?>">Reply</button></small></h5>
</div>
<div class="col-md-3"><img src="admin/member_profile/commenter_icon.png" alt="photo" width="50"></div>
<div class="col-md-6 text_indent">
<?php echo $comments['comment'] ?>
</div>
<!--
<div class="comment col-xs-offset-1">
<div class="col-md-12"><h5>Pankaj</h5></div>
<div class="col-md-3"><img src="admin/member_profile/commenter_icon.png" alt="photo" width="40"></div>
<div class="col-md-9 text_indent">kya hai be</div>
</div>-->
<!--//-->
<div class="row col-md-12">
<!--reply system starts here-->
<!--reply form goes here -->
</div>
<!--//-->
</div>
<?php } ?>

Answer 1

So Simple in your loop, and in the hidden form section , set a class for a form by example <form class="reply_form" ...> , then you have just to set a jquery event to the button so it goes into comment parent div (.parents([.selector])) then search for the current form using the its class (.find( selector )) and show() it :
I tried to reproduce the genrated loop code in the below snippet :
$('.replybtn').on("click", function() {
$(this).parents(".comment").find(".reply_form").show();
});
.reply_form {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="comment">
<div class="col-md-12">
<h5>
Commenter <small><button class="replybtn" id="<?php echo $comments['comment_id']; ?>">Reply</button></small></h5>
</div>
<div class="col-md-3"><img src="http://icons.iconarchive.com/icons/graphicloads/flat-finance/256/person-icon.png" alt="photo" width="50"></div>
<div class="col-md-6 text_indent">
the comment
</div>
<!--
<div class="comment col-xs-offset-1">
<div class="col-md-12"><h5>Pankaj</h5></div>
<div class="col-md-3"><img src="admin/member_profile/commenter_icon.png" alt="photo" width="40"></div>
<div class="col-md-9 text_indent">kya hai be</div>
</div>-->
<!--//-->
<div class="row col-md-12">
<form action="#" class="reply_form">
<div class="form-group">
<label for="name">Name </label>
<input id="name" type="text" name="name" class="form-control">
</div>
<div class="form-group">
<label for="comment">Comment </label>
<textarea id="comment" name="comment" class="form-control"></textarea>
</div>
<div>
<button type="button" class="btn btn-primary ">Submit</button>
</div>
</form>
</div>
<!--//-->
</div>
<div class="comment">
<div class="col-md-12">
<h5>
Commenter 2 <small><button class="replybtn" id="<?php echo $comments['comment_id']; ?>">Reply</button></small></h5>
</div>
<div class="col-md-3"><img src="http://icons.iconarchive.com/icons/graphicloads/flat-finance/256/person-icon.png" alt="photo" width="50"></div>
<div class="col-md-6 text_indent">
the comment
</div>
<!--
<div class="comment col-xs-offset-1">
<div class="col-md-12"><h5>Pankaj</h5></div>
<div class="col-md-3"><img src="admin/member_profile/commenter_icon.png" alt="photo" width="40"></div>
<div class="col-md-9 text_indent">kya hai be</div>
</div>-->
<!--//-->
<div class="row col-md-12">
<form action="#" class="reply_form">
<div class="form-group">
<label for="name">Name </label>
<input id="name" type="text" name="name" class="form-control">
</div>
<div class="form-group">
<label for="comment">Comment </label>
<textarea id="comment" name="comment" class="form-control"></textarea>
</div>
<div>
<button type="button" class="btn btn-primary ">Submit</button>
</div>
</form>
</div>
<!--//-->
</div>
<div class="comment">
<div class="col-md-12">
<h5>
Commenter 3 <small><button class="replybtn" id="<?php echo $comments['comment_id']; ?>">Reply</button></small></h5>
</div>
<div class="col-md-3"><img src="http://icons.iconarchive.com/icons/graphicloads/flat-finance/256/person-icon.png" alt="photo" width="50"></div>
<div class="col-md-6 text_indent">
the comment
</div>
<!--
<div class="comment col-xs-offset-1">
<div class="col-md-12"><h5>Pankaj</h5></div>
<div class="col-md-3"><img src="admin/member_profile/commenter_icon.png" alt="photo" width="40"></div>
<div class="col-md-9 text_indent">kya hai be</div>
</div>-->
<!--//-->
<div class="row col-md-12">
<form action="#" class="reply_form">
<div class="form-group">
<label for="name">Name </label>
<input id="name" type="text" name="name" class="form-control">
</div>
<div class="form-group">
<label for="comment">Comment </label>
<textarea id="comment" name="comment" class="form-control"></textarea>
</div>
<div>
<button type="button" class="btn btn-primary ">Submit</button>
</div>
</form>
</div>
<!--//-->
</div>
</div>
<!-- /container -->

Answer 2

What you have to do, if your reply form is individual for every comment
Make Reply div display:none default
On click event of button just you have to make display:block of that reply form
Have a look updated code,
<?php foreach ($comment_res as $comments) { ?>
<div class="comment">
<div class="col-md-12"><h5><?php echo $comments['vname'] ?> <small><button class="replybtn" id="<?php echo $comments['comment_id']; ?>">Reply</button></small></h5></div>
<div class="col-md-3"><img src="admin/member_profile/commenter_icon.png" alt="photo" width="50"></div>
<div class="col-md-6 text_indent"><?php echo $comments['comment'] ?></div>
<!--
<div class="comment col-xs-offset-1">
<div class="col-md-12"><h5>Pankaj</h5></div>
<div class="col-md-3"><img src="admin/member_profile/commenter_icon.png" alt="photo" width="40"></div>
<div class="col-md-9 text_indent">kya hai be</div>
</div>-->
<!--//-->
<div class="row col-md-12 replyform-<?php echo $comments['comment_id']; ?>" style="display: none;"><!--reply system starts here-->
<!--reply form goes here -->
</div>
<!--//-->
</div>
<?php } ?>
<script>
jQuery(document).on("click", ".replybtn", function () {
var comment_id = jQuery(this).attr("id");
jQuery(this).parents(".comment").find(".replyform-" + comment_id).css({display: "block"});
});
</script>

Answer 3

$('.replybtn').click(function () {
$('#reply_form').show()
});
Where #reply_form - form to reply

Answer 4

You can do This using Jquery hide() and show() function like below.
$('.replybtn').click(function () {
$('#comment_form').show()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<div class="comment">
<div class="col-md-12">
<h5>
<small>
<button class="replybtn">Reply</button>
</small>
</h5>
</div>
<div class="col-md-3">
<img src="admin/member_profile/commenter_icon.png" alt="photo" width="50">
</div>
<div class="col-md-6 text_indent"></div>
<div class="row col-md-12" id="comment_form" style="display:none">
<div class="form-group">
<label for="form_lastname">Name *</label>
<input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Please enter your lastname *" required="required" data-error="Lastname is required.">
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="form_email">Email *</label>
<input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="form_message">Message *</label>
<textarea id="form_message" name="message" class="form-control" placeholder="Message for me *" rows="4" required="required" data-error="Please,leave us a message."></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
</div>

Answer 5

<?php
$comment_res['comment_res'] = array(
'vname'=>'sggsgsgsg',
'comment_id'=>10,
'comment'=>'sgsdgsgdsgsg'
);
foreach ($comment_res as $comments){ ?>
<div class="comment">
<div class="col-md-12"><h5><?php echo $comments['vname'] ?> <small><button class="replybtn" id="<?php echo $comments['comment_id']; ?>" data-target="#commentQue_<?php echo $comments['comment_id'];?>">Reply</button></small></h5></div>
<div class="col-md-3"><img src="admin/member_profile/commenter_icon.png" alt="photo" width="50"></div>
<div class="col-md-6 text_indent"><?php echo $comments['comment'] ?></div>
<div class="modal fade commentQueModal" id="commentQue_<?php echo $comments['comment_id']; ?>" tabindex="-1" role="dialog" aria-labelledby="commentQueLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div class="suceess_container">
<h4 class="suceess_msg" id="suceess_msg_comment"></h4>
<h4 class="error_msg" id="error_msg_comment"></h4>
</div>
</div>
<form class="commentQueform" id="commentQueform"></form>
<div class="modal-body">
<div class="form-group">
<label>Comment</label>
<input type="text" name="followup_comment" id="followup_comment" class="form-control">
<div class="error_msg_int" id="error_msg_followup_comment"></div>
</div>
<input type="hidden" name="que_id" id="que_id" value="<?php echo $que_det['id']; ?>">
<input type="hidden" name="follow_que_id" id="follow_que_id" value="<?php echo $followup_que_det['id']; ?>">
</div>
<div class="modal-footer">
<button id="comment_que_<?php echo $followup_que_det['id']; ?>_<?php echo $que_det['id'] ?>" name="comment_que" value="Submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
<?php } ?>
NOW you have to hide this texbox and when any user hit button reply and with the help of ajax we can store it in to the database.