CODEWITHSUNDEEP
javascriptjqueryhtmlajaxfacebook
Yax
Yax

Reputation: 2189

AJAX within AJAX not working as expected?

Like Facebook commenting system, when you comment, your comment gets appended to the previous comments and is displayed at once. That's what I am trying to achieve here. Though the comment get appended but one will have to reload the page before it shows up.

Note: Each post are loaded with just two comments and a button that will allow you load more is then attached. When you click on the button, it loads the remaining comments via AJAX and changes the More comments button with Less comments which reduces the comment to two when clicked.

If a comment, I want it to work like that of Facebook and at the same time if the user has not click on the More comments button it should automatically show the remaining comments with the new one the user just commented.

The 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 -->

And this the 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('');
        });
    });
 })

Upvotes: 1

Views: 88

Answers (2)

John S
John S

Reputation: 21492

Try changing the following line:

html(msg1).appendTo($pc);

To this, if the ajax call returns just the newly added comment:

$pc.prepend(msg1);

This will put the returned html after the last "per_comment" element, if there is one. Otherwise, it will put it as the first child of the "comment_data" element.

To this, if the ajax call returns all the comments:

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

This removes the list of comments and then inserts the new list returned by the ajax call.

EDIT: I see that you display the comments in descending order, so I assume you want the new comment at the top.

Upvotes: 2

Frank Conry
Frank Conry

Reputation: 2726

due to Javascript binding, you are overwriting the request variable, so it will probably behave funny. Try something like this:

$('.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('');
        });
    });
 })

Upvotes: 0

Related Questions