The page has comments and replies, similar to Youtube. Posting a new comment works fine, but fails when replying to a comment.

I tested with console.log in the targeted textarea, and it works fine if you reply only to one comment, but if I try to switch the comment I want to reply to, the textarea value is empty. Except for the first comments reply textarea, somehow that one always works.

Do I need to reset the previously submitted form somehow differently or is there something else I'm missing?

$(document).ready(function() {
  var id = $('#post_id').val();
  $.ajax({
    url: 'search.php',
    type: 'POST',
    data: {
      allcomments: id
    },
    dataType: "html",
    error: function() {
      alert("Jokin meni vikaan");
    },
    success: function(data) {
      $('.discussion-section').append(data);
      tinymce.remove();
      initializeTinyMce('textarea');
    }
  });

  $('.discussion-section').on('submit', '.form-reply, #comment', function(e) {
    e.preventDefault();
    var comment = $('#topic').val();
    var post_id = $('#post_id').val();
    var comment_id = $(this).find('#comment_id').val();
    if (!isReply) {
      var comment = $('#topic').val();
    } else {
      var comment = $(this).find('#reply-topic').val();
    }

    $.ajax({
      url: "search.php",
      method: "POST",
      data: {
        comment: comment,
        id: post_id,
        comment_id: comment_id,
        isReply: isReply
      },
      dataType: "text",
      success: function(message) {
        message = $.parseJSON(message);
        $('.error-txt').stop().show();
        $('.error-txt').html(message.output);
        $('.error-txt').stop().delay(1000).fadeOut("fast");
        $('.comment-amount').html(message.amount   ' kommenttia');
        if (!isReply) {
          $('.post-hr').after(function() {
            if ('.discussion-section:contains(".empty-room")') {
              $('.empty-room').remove();
            }
            $("#comment")[0].reset();
            return message.newComment;

          });
        } else {
          $(".reply").text("Answer");
          $(".form-reply").hide();
          $(e.target).next().append(message.newComment);
        }
        tinymce.remove();
        initializeTinyMce('textarea');
      },
      error: function(message) {
        alert('Something went wrong');
      }
    });
    $(this)[0].reset();
    $(".reply").text("Answer");
    $(".form-reply").hide();
  });

Here is the data that gets loaded dynamically to the page

if(isset($_POST['allcomments'])) {
$stmt = $user->connect()->prepare("SELECT * FROM comments WHERE post_id = ? ORDER BY date DESC;");
    if(!$stmt->execute(array($_POST['allcomments']))){
        $stmt = null;
        $output = "<div class='error-texti'><p>STMT FAILED</p></div>";
        exit();
    }
    $allComments = $stmt->fetchAll(PDO::FETCH_ASSOC);




    foreach ($allComments as $key => $userPost) {
      $mysqldate = strtotime($userPost['date']);
      $phpdate = date('Y/m/d G:i A', $mysqldate);
      echo "<div class='discussion-wrapper'>
            <div class='discussion'>
              <div class='date'>
              <p class='username'>" . $userPost['name'] . "</p>
              <p>" . $phpdate . "</p>
              </div>
              <div class='bodytext'><p>" . $userPost['content'] . "</p> </div>
              </div>
              <button class='reply' data-id='". $userPost['comment_id'] ."'>Answer</button>
                <form class='form-reply ". $userPost['comment_id'] ."' method='POST' id='reply' style='display: none; width: 80%; padding-top: 10px; padding-left: 10px;'>
                <input type='hidden' id='post_id' value='". $_POST['allcomments'] ."'>
                <input type='hidden' id='comment_id' value='". $userPost['comment_id'] ."'>
                <textarea class='tinymce' name='content' id='reply-topic' placeholder='Kerro ajatuksistasi...' rows='7' style='z-index: 99999;'></textarea>
                <div class='post-comment' style='align-self: flex-end;'>
                    <input type='submit' name='post' onclick='isReply = true;' onvalue='Vastaa' id='reply'>
                </div>
                </form>
              <div class='discussion-reply'>
              <div class='date'>
                <p class='username'></p>
                <p></p>
                </div>
                <div class='bodytext'> </div>
              </div>
            </div>";
  }
}   

CodePudding user response：

Update

Fixed it by making 2 ajax functions instead of 1 for the comments and replies. Not sure why it worked tho lol.

CodePudding user response：

Maybe use $(' /* text area / ').val(' / new value */ ') ?