CODEWITHSUNDEEP
javascriptphpjquerylaravellaravel-blade
A4family
A4family

Reputation: 73

How to open reply text box of only selected comment?

There is a post. In post user can comment and reply as well. There can be lots of comment. Every comment has reply button. Every reply button has same class reply. So, whenever i try to reply certain comment and press reply button. Every comment's reply text box opens. I want to open reply text box of selected comment.

I have tried by hiding the reply form at first and then it shows up after clicking the reply button. Comment id can be passed form the reply button to jquery as well.

Blade file
<a href="#" class="reply">Reply</a>
<div class="reply-form">
  <form action="{{route('reply')}}" method="post">
     @csrf
     <input name="reply" type="text">
  </form>
</div>

jquery file
$('.reply-form').hide();
$('.comment-container').delegate(".reply","click",function(e){
  e.preventDefault();
  $('.reply-form').toggle(function(){

  });
})

For Every comment there is a button reply with same class name reply So, every reply of comments appear after i click one reply button.

Upvotes: 0

Views: 750

Answers (3)

PriyankMotivaras
PriyankMotivaras

Reputation: 740

Try this with change of jquery.

Blade file
<a href="#" class="reply">Reply</a>
<div class="reply-form d-none">
  <form action="{{route('reply')}}" method="post">
     @csrf
     <input name="reply" type="text">
  </form>
</div>

add style for d-none

.d-none{display:none;}

And jquery as,

$(document).on('click','.reply',function(){
   $(this).closest('.reply-form').removeClass("d-none");
   //$(this).closest('.reply-form').toggleClass("d-none"); //second option if want to show and hide
}

And Remove href="#" from anchor or add javascript:void(0)

Upvotes: 0

Levente Gabos
Levente Gabos

Reputation: 411

Try the following:

$('.reply-form').hide();
$('.reply').click(function(e) {
   e.preventDefault();
   var replyForm = $(this).siblings('.reply-form');
   $(replyForm).toggle(function(){

   });
});

Upvotes: 0

Jinesh
Jinesh

Reputation: 1580

Try this 

$('.reply-form').hide();
$('.comment-container').delegate(".reply","click",function(e){
  e.preventDefault();
  $($(this).find('.reply-form')).toggle(function(){

  });
});

Upvotes: 1

Related Questions