ParentNode childNodes Javascript with laravel

Question

ParentNode childNodes Javascript with laravel

Navigation

#1 by (1 votes)

0

I have a problem with my comment system on the website.

The problem is this, I want the comments to be edited in a modal window "that already works thanks to bootstrap" but I can not get that comment that will be edited to load in the modal window.

This is my code:

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();
    });

What I want is that when you click on edit in any comment, open the modal and load in the comment that will be edited. In this case:

{{ $comment->comment }}

I've tried more than that of parentNode and childNodes but every time I open the modal "click edit" load empty spaces, or load the name of the user who made the comment and the date of creation, or load " edit - delete "< - (the buttons) or just load everything" depending on the value you place in childNodes I have occurred to place several times parentNode but nothing goes the same.

javascript jquery laravel

asked by Juan Rincón 03.06.2017 в 03:59

source

1 answer

Show Ratings according to PHP MYSQL subject Find out length of document with ITextSharp C #

score 1 · Accepted Answer

It is a not so optimal way to do this, but in your code to refer to the link that was given click you can do it with the reserved word this instead of event.target

The property ParentNode will get the parent node, that is, in its line event.target.parentNode is accessing the div with class panel-footer which is the wrong node to get the data you want since it is in the panel-body .

One option would be as shown in the example, (short explanation in the comments)

$('.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>