AJAX в AJAX не работает должным образом?

Question

Как система комментариев Facebook, когда вы комментируете, ваш комментарий добавляется к предыдущим комментариям и отображается сразу. Вот чего я пытаюсь достичь здесь. Хотя комментарий добавляется, но нужно перезагрузить страницу до ее появления.

Примечание: Каждое сообщение загружается всего двумя комментариями, а затем добавляется кнопка, которая позволит вам загружать больше. Когда вы нажимаете на кнопку, она загружает оставшиеся комментарии через AJAX и меняет кнопку More comments с Less comments, которая уменьшает комментарий до двух при нажатии.

Если комментарий, я хочу, чтобы он работал так же, как и в Facebook, и в то же время, если пользователь не нажал кнопку More comments, он должен автоматически отображать оставшиеся комментарии с новым комментарием пользователя.

HTML-:

<div class='feeds'> 
<div class='post'> 
<h5> Post Header </h5> 
<p> post 1 2 3 </p> 
<a href ='#' class = 'comment'>Comment</a> 
<div class='comments'> 
    <div class='comment_data> 
     <div class = ' per_comment '> 
     <p> Comment 1</p> 
     </div> 
     <div class = 'per_comment '> 
     <p> Comment 2</p> 
     </div> 
     <button class='morecomments ' value='7' type='submit '> 
     More comments</button> 
     <div class = 'commentdiv'> 
      <textarea autocomplete = 'off' class='commenttext form-control' rows = '1' placeholder='Have your say...'></textarea> 
      <button class='comment btn btn-xs btn-primary onespacedown' value = '7' type='submit'>Comment</button> 
     </div> 

    </div> <!-- end of comment_data div --> 
</div> <!-- end of post div --> 

---

И этого AJAX:

$('.feeds').on('click', '.comment', function() { 
var $this = $(this); 
var post_comment = $this.parents('.feeds').find('.commenttext').val(); 
var post_id = $(this).val(); 
var user_id = $(".user_id").text(); 
var request = $.ajax({ 
     url: "insertcomment.php", 
     type: "POST", 
     data: { post : post_id , user : user_id, comment: post_comment }, 
     dataType: "html" 
    }); 
    request.done(function(msg) {  
     var $pc = $this.parents('.feeds').find('.comment_data'); 
     var $button = $this.prev('.pullcomments'); 
     //if the comments are already loaded then don't load it again just display it 
      var request = $.ajax({ 
       url: "comments.php", 
       type: "POST", 
       data: { 
        post: post_id, 
        user: user_id 
       }, 
       dataType: "html" 
      }); 
      request.done(function (msg1) { 
       html(msg1).appendTo($pc); 
       $button.slideDown(); 
       $this.replaceWith("<button class='lesscomments pullcomments' value='7' name = 'more' type='submit'><span class='glyphicon glyphicon-chevron-up'></span></button>"); 
       $this.parents('.feeds').find('.commenttext').val(''); 
     }); 
    }); 
}) 

---

Answer 1

Попробуйте изменить следующую строку:

html(msg1).appendTo($pc); 

к этому, если возвращается Ajax вызова только недавно добавленный комментарий:

$pc.prepend(msg1); 

Это будет поместите возвращенный html после последнего элемента per_comment, если он есть. В противном случае он будет помещен как первый дочерний элемент элемента comment_data.

Для этого, если Ajax вызов возвращает все комментарии:

$pc.children('.per_comment').remove(); 
$pc.prepend(msg1); 

Это удаляет список комментариев, а затем вставляет новый список, возвращаемый вызов Ajax.

EDIT: Я вижу, что вы показываете комментарии в порядке убывания, поэтому я предполагаю, что вы хотите, чтобы новый комментарий находился вверху.

Answer 2

благодаря Javascript бункером ding, вы переписываете переменную запроса, поэтому она, вероятно, будет вести себя смешно. Попробуйте что-то вроде этого:

$('.feeds').on('click', '.comment', function() { 
var $this = $(this); 
var post_comment = $this.parents('.feeds').find('.commenttext').val(); 
var post_id = $(this).val(); 
var user_id = $(".user_id").text(); 
var request = $.ajax({ 
     url: "insertcomment.php", 
     type: "POST", 
     data: { post : post_id , user : user_id, comment: post_comment }, 
     dataType: "html" 
    }); 
    request.done(function(msg) {  
     var $pc = $this.parents('.feeds').find('.comment_data'); 
     var $button = $this.prev('.pullcomments'); 
     //if the comments are already loaded then don't load it again just display it 
      var request2 = $.ajax({ 
       url: "comments.php", 
       type: "POST", 
       data: { 
        post: post_id, 
        user: user_id 
       }, 
       dataType: "html" 
      }); 
      request2.done(function (msg1) { 
       html(msg1).appendTo($pc); 
       $button.slideDown(); 
       $this.replaceWith("<button class='lesscomments pullcomments' value='7' name = 'more' type='submit'><span class='glyphicon glyphicon-chevron-up'></span></button>"); 
       $this.parents('.feeds').find('.commenttext').val(''); 
     }); 
    }); 
})