Tengo un inconveniente en mi sistema de comentarios en el sitio web.
El problema es el siguiente, quiero que los comentarios se editen en una ventana modal "que ya funciona gracias a bootstrap" pero no logro que dicho comentario que se editará se cargue en la ventana modal.
Este es mi código:
HTML:
<article class="row">
<div class="col-md-3 col-sm-3 hidden-xs">
<figure class="thumbnail">
<img class="img-responsive" src="/uploads/avatars/{{ $comment->user->profilepic }}" />
<figcaption class="text-center">{{ $comment->user->name }}</figcaption>
</figure>
</div>
<div class="col-md-8 col-sm-8">
<div class="panel panel-default arrow left">
<div class="panel-body">
<header class="text-left">
<div class="comment-user"><i class="fa fa-user"></i> {{ $comment->user->name }}</div>
<time class="comment-date" datetime="{{ $comment->created_at->diffForHumans() }}"><i class="fa fa-clock-o"></i> {{ $comment->created_at->diffForHumans() }}</time>
</header>
<div id="comment-post">
<p id="display-post">{{ $comment->comment }}</p>
</div>
</div>
<div class="panel-footer list-inline comment-footer">
@if(Auth::guest())
No puedes responder ningún comentario si no has ingresado.
@else
@if(Auth::user() == $comment->user)
<a href="#" data-toggle="modal" data-target="edit-comment" class="edit-comment">Editar</a> <a href="#" data-toggle="modal" data-target="delete-comment" class="delete-comment">Eliminar</a>
@endif
@if(Auth::user() != $comment->user)
<a href="#">Responder</a>
@endif
@endif
</div>
</div>
</div>
</article>
JS:
$('.edit-comment').click(function(event){
event.preventDefault();
var commentBody = event.target.parentNode.childNodes[2].textContent;
$('#comment-body').val(commentBody);
$('#edit-comment').modal();
});
Lo que quiero es que al hacer click en editar en cualquier comentario, se abra el modal y cargue en el el comentario que será editado. En este caso:
{{ $comment->comment }}
He probado de más eso del parentNode
y childNodes
pero cada que abro el modal "click en editar" carga espacios vacíos, o carga el nombre del usuario que hizo el comentario y la fecha de creación, o carga "editar - elimiar" <- (los botones) o simplemente carga todo "dependiendo el valor que coloque en childNodes
se me ha ocurrido colocar varias veces parentNode
pero nada va igual.