Error retrieving a textarea by jquery

Navigation
0

I have the following problem I'm trying to retrieve a textarea from a response div that is clicked to open, but that error when trying to retrieve the textarea for some reason I'm not getting anyone can help me?

Codes:

javascript 

    function addEventosRespostas() {
   $('.resposta')

       .on("click", function(){
        var id = $(this).children('input').val();
        var texto = $('.resp').children('#texto').val();
        $(this).fadeOut("fast");
        $('.coment').find('.resp').fadeOut("slow",function(){
            $('.resposta').fadeIn("fast");
        });

        $(this).parents('.coment').find('.resp').fadeIn("slow");

        $('.resp').find('input').on("click",function(){

            alert(texto);
//            $.post('swith/viwer.php',{
//                acao: 'responder', id: id},
//            function(){
//                $('.visualizaron').fadeOut('slow');
//            });
           return false; 
        });

        return false;
       });
}

html with php 

<div class='comentar  fl-left'>
                        <div class='coment com' >

                                <?php 

                    if($foto == "" || $foto == "uploads/"):
                        echo  "<a href='user?id={$id}'><img class='fl-left' src='".REQUIRE_PATH."/css/boot/icons/thumb.png'></a>";
                    else:
                        echo  "<a href='user?id={$id}'><img class='fl-left' src='{$imx['foto']}'></a>";
                    endif;
                    ?>
                   <p><small class='fontze1'>Comentado por:</small> <?=$nome?> <small>Em:  </small> <?=$date?> <small>As: </small> <?=$hora?></p>

                   <div class="comentando">
                       <p><?=nl2br($comentario)?></p></div>
                       <div class='fl-right resposta'>Responder<input type='hidden' value='<?=$big[id] ?>' name='idcoment'>
                       </div>
                       <div class=' resp' style='display:none'>
                           <form method='post' name="comentarios">
                               <textarea id="texto"></textarea>  

                               <input class='btn btn-green' type='submit' value='responder' name='responder'>
                           </form>
                       </div>
                   </div>
    
asked by anonymous 07.04.2017 / 21:29

2 answers

0

Change .children('#texto') to .find('#texto') . The #texto is not a direct child of .resposta , but of .resp , therefore: 

$(this).siblings('.resp').find('#texto');

Since .resp and .resposta are at the same level use siblings . 

$('.resposta').on("click", function() {
  var id = $(this).children('input').val();
  var texto = $(this).siblings('.resp').find('#texto').val();


  $(this).text('Ver Digitado');


  $(this).fadeOut("fast");
  $('.coment').find('.resp').fadeOut("slow", function() {
    $('.resposta').fadeIn("fast");
  });

  if (texto != '') {
    alert(texto);
  }

  $(this).parents('.coment').find('.resp').fadeIn("slow");

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass='comentarfl-left'><divclass='comentcom'><divclass="comentando">
      <p>
        <?=nl2br($comentario)?>
      </p>
    </div>
    <div class='fl-right resposta'>Responder</div>
    <div class=' resp' style='display:none'>
      <form method='post' name="comentarios">
        <textarea id="texto"></textarea>
      </form>
    </div>
  </div>
    
07.04.2017 / 22:09
0

The problem occurs because you are setting and assigning the value of the textarea to the "text" variable directly within the 'answer' listener. At this point there is no textarea content yet.

To solve the problem, simply move the code snippet from the definition of the text variable, into the clicker listener of the "respoder" button.

The final code will look like this: 

$(function() {
  $('.resposta').on("click", function() {
    var id = $(this).children('input').val();

    $(this).fadeOut("fast");

    $('.coment').find('.resp').fadeOut("slow", function() {
      $('.resposta').fadeIn("fast");
    });

    $(this).parents('.coment').find('.resp').fadeIn("slow");

    $('.resp').find('input').on("click", function() {
      var texto = $('.resp').find('#texto').val();

      alert(texto);
      //            $.post('swith/viwer.php',{
      //                acao: 'responder', id: id},
      //            function(){
      //                $('.visualizaron').fadeOut('slow');
      //            });
      return false;
    });

    return false;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divclass='comentarfl-left'><divclass='comentcom'><p><smallclass='fontze1'>Comentadopor:</small>Eumsm<small>Em:</small>07-04-2017<small>As:</small>17:14:00</p><divclass="comentando">
      <p>Este é um exemplo de comentário</p>
    </div>
    <div class='fl-right resposta'>Responder<input type='hidden' value='<?=$big[id] ?>' name='idcoment'>
    </div>
    <div class=' resp' style='display:none'>
      <form method='post' name="comentarios">
        <textarea id="texto"></textarea>
        <input class='btn btn-green' type='submit' value='responder' name='responder'>
      </form>
    </div>
  </div>
    
07.04.2017 / 22:15
USERFORM: Move ListBox item up or down Help about a JPA query