AJAX within AJAX not working correctly

Question

I am working on social site. On first load, it fetches all the post, each with two comment max. If the comments are more than two it attach More comment button to it, if clicked, it displays all the comments and replace the button with Less comment.

That is just a little story of how it works. I want whenever a comment is made, it should be appended to existing ones and displayed instantly via AJAX. It does this but it redisplay each comments 3 times, when you reload the page, everything is okay...

<div class = 'post_updates'>
  <div class = 'feeds'>
    <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>
</div>

The jQuery AJAX code:

 $('.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: "insert.php",
      type: "POST",
      data: { post : post_id , user : user_id, comment: post_comment },
      dataType: "html"
    });
    request.done(function( msg ) {    
        $pc = $this.parents('.feeds').find('.per_comment');
        //fetch comments and display
            var request = $.ajax({
                url: "comments.php",
                type: "POST",
                data: {
                    post: post_id,
                    user: user_id
                },
                dataType: "html"
            });
            request.done(function (msg) {
                $pc.html(msg).data('loaded', true);
                $this.replaceWith("<button class='lesscomments btn-block pullcomments' value='' name = 'more' type='submit'>Less comments</button>"); 
                $this.parents('.feeds').find('.commenttext').val('');
        });
    });
})

In advance, thanks.

@Tats_innit: [jQuery.ajax handling continue responses: “success:” vs “.done”?](http://stackoverflow.com/q/8840257/1438393) — Amal Murali, Dec 23 '13 at 03:32
Agreed @AmalMurali I missed the second call: http://stackoverflow.com/questions/8847829/what-is-difference-between-success-and-done-method-of-ajax — Tats_innit, Dec 23 '13 at 03:35
@user3009875 yep, infact `:)` http://stackoverflow.com/questions/8847829/what-is-difference-between-success-and-done-method-of-ajax — Tats_innit, Dec 23 '13 at 03:37
Is your php script returning the data properly? What is the append code like (the js that actually manipulates the DOM)? — Piotr Kaluza, Dec 23 '13 at 03:42
The second AJAX call does the appending... And, the PHP code is working just fine. — Yax, Dec 23 '13 at 03:45
It would be helpful if you were to show what the second ajax call returns. Also, it places that html into the element with the "per_comment" class, but I see no such element in the code. — John S, Dec 23 '13 at 04:16
It may not be causing you any issues, but everywhere you call `.parents()`, you should probably be calling `.closest()` instead. The former could match more than one element, while the latter never will. — John S, Dec 23 '13 at 04:17

score 0 · Answer 1 · answered Dec 23 '13 at 03:33

try $.post in jquery

$.post("insert.php",{post : post_id , user : user_id, comment: post_comment},function(){})
.success(function(data){
    //callback when first post completed
    //begin second ajax post
    $.post("comments.php",{post: post_id,user: user_id},function(){})
    .success(function(){
        //call back when second post completed
    });
});

AJAX within AJAX not working correctly

1 Answers1