0

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.

1 respuesta 1

1

Es una forma no tan óptima de realizar esto, pero en su código para referirse al enlace que se dio click puede hacerlo con la palabra reservada this en lugar de event.target

La propiedad ParentNode obtendrá el nodo padre es decir en su línea event.target.parentNode está accediendo al div con clase panel-footer que es el nodo equivocado para obtener el dato que desea ya que este se encuentra en el panel-body.

Una opción sería como muestro en el ejemplo , (explicación corta en los comentarios)

$('.edit-comment').click(function(event){
  event.preventDefault();
  /* Accedemos al Div Que contiene el Panel*/
  var divcoment = this.parentNode.parentNode;
  /* Buscamos el Contenido con Id display-text  */
  var commentBody = $(divcoment).find('#display-post').text();
  console.log(commentBody);
   /* Asignas a tu modal */
   /*$('#comment-body').val(commentBody);
   $('#edit-comment').modal();*/
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article class="row">                     
    <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"><i class="fa fa-clock-o"></i> CREATE_ATE</time>
          </header>
          <div id="comment-post">
              <p id="display-post">COMENT - COMMENT1</p>
          </div>
        </div>

        <div class="panel-footer list-inline comment-footer">
            <a href="#" data-toggle="modal" data-target="edit-comment" class="edit-comment">Editar</a>
        </div>
      </div>
    </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> CREATE_ATE</time>
          </header>
          <div id="comment-post">
              <p id="display-post">COMENT - COMMENT2</p>
          </div>
        </div>

        <div class="panel-footer list-inline comment-footer">
            <a href="#" data-toggle="modal" data-target="edit-comment" class="edit-comment">Editar</a>
        </div>

      </div>
    </div>
</article>

4
  • Lo he probado pero no funcionó.. la variable divcoment entra ahí al div que busco? Commented el 3 jun. 2017 a las 3:11
  • Oye en realidad, revisando el log del navegador si funciona! ahora a ver como cargo el modal con la data Commented el 3 jun. 2017 a las 3:19
  • Graciassss!!!! funcionó perfectamente :D te lo agradezco enormemente. Gracias por tu tiempo y tu ayuda. Commented el 3 jun. 2017 a las 3:24
  • @JuanRincón me alegra , no lo hice con modal porque en tu código no aparece la modal. si solucionó tu problema no olvides marcar la respuesta como aceptada. Saludos.
    – Dev. Joel
    Commented el 3 jun. 2017 a las 3:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.