Как добавить данные в конкретный DIV в JQUERY

Question

У меня возникли проблемы с моим JQUERY.

в основном, у меня есть этот facebook стиль отображения сообщений. у каждой должности есть <input> box, где участники могут оставлять комментарии. когда пользователь нажимает <enter> мой jquery (AJAX), вы получите отправленный комментарий и сохраните его в моей базе данных.

комментарий должен появиться сразу в конкретном <DIV>, где был сделан комментарий.

мой вопрос, когда я оставить свой комментарий на определенном POST Пожаловаться на сообщение я сделал обновляется до ALL моих постов. он исчезнет только при ударе обновления.

это мой <div>, который отображает TITLE и КОММЕНТАРИИ

<div id="content"> 
    <?php 
    /* GET TITLE*/ 
    $result = displayPosts(); 
     while ($row = $result->fetch_assoc()) { 
     $rowId = $row['id']; 

    ?> 
    /* ECHO TITLE*/  
    <b> <?php echo $row['title'] . "<br />"; ?> </b> 

    <?php 
    /* GET COMMENTS PER POSTS */ 
    $comRes = getComments($rowId); 
     while ($comRow = $comRes->fetch_assoc()) { 
    ?> 

    <!--COMMENT AREA--> 
    <div class="comments"> 
     <!--DISPLAY COMMENTS--> 
     <small> <?php echo $comRow['comment'] . "<br />";?> </small> 
    </div> 

    <?php } /* end of second while loop */ ?> 

    <input type="text" post_id="<?php echo $row['id']; ?>" id="TextBox" name="input" value="" /> 

    <?php } /* end of first while loop */ ?> 
</div> 

Это мой Jquery. Всякий раз, когда пользователь нажимает <enter> на определенный POST он должен показать комментарий на этих конкретные DIV/ПОСТАХ только

$(document).ready(function() { 
    $('input#TextBox').keyup(function (z) { 
     /* when this commentbox is entered*/ 
     if(z.keyCode == 13) { /*keyCode 13 = enter*/ 
       var post_id = $(this).attr('post_id'); /* get the post_id in the <input> box */ 
       var comment = $(this).val(); /* get the value of the <input> */ 
       $.post('../portal/comment.php', {post_id: post_id, comment: comment}); 
       $('input#TextBox').val(''); 
       $(this).parent('#content').children('.comments').append("<div>"+comment+"</div>"); 
     } 
    }); 
}); 

эта строка содержит мой post_id так всякий раз, когда я попал войти в моем поле ввода, моя система знает, что конкретного post im, ссылаясь на ..

<input type="text" post_id="<?php echo $row['id']; ?>" id="TextBox" name="input" value="" /> 

Answer 1

Проблема заключается в этой строке:

$(this).parent('#content').children('.comments').append("<div>"+comment+"</div>"); 

С этим вы Добавляя новый текст комментария в каждом div с comments css класс.

Вы могли бы выполнить что-то вроде:

<!-- Add post id to identify corresponding comment area --> 
<div class="<?php echo $rowId; ?>_comments comments"> 
    <small> <?php echo $comRow['comment'] . "<br />";?> </small> 
</div> 

Затем в ЯШАХ:

$(function() { 
    $('input#TextBox').keyup(function (z) { 
     if(z.keyCode == 13) { 
      var input = $(this); 
      var post_id = input.attr('post_id'); 
      var comment = input.val(); 
      $.post('../portal/comment.php', {post_id: post_id, comment: comment}); 
      $('input#TextBox').val(''); 
      // Append comment to the corresponding div 
      $('.' + post_id + '_comments').append("<div>"+comment+"</div>"); 
     } 
    }); 
}); 

Answer 2

Проблема заключается в том, что вы пытаетесь отличить свой комментарий от DIVs. Предположим, вы хотите выбрать специальный комментарий div. Как вы можете сделать это на своей веб-странице? Используя этот код не даст вам специальный комментарий DIV:

$(".comments") 

Вы должны дать каждый комментарий Див особую идентичность (это просто HTML id). Таким образом, вы можете легко его выбрать, например:

$("#comments_14") 

и обновление станет немного сложнее. Вместо того, чтобы в следующей строке:

$(this).parent('#content').children('.comments').append("<div>"+comment+"</div>"); 

вы должны сделать что-то вроде этого:

var post_id = get post id some way; // e.g. put it in an attribute in text input 
$('#comments_' + post_id).append("<div>"+comment+"</div>");