如何显示所有帖子的评论

Question

I have a post and comment system. Something like facebook post and comment system. The post display properly, I can submit comment on all posts. But the comments only display for the first post ie the post displayed at the top. . The problem on which I need your assistance is as follows: -The comments for each of the posts should display correspondently.

These what I have done. View:

  <div class="box box-widget">
                <div class="box-header with-border">
                  <div class="user-block">

                    <span class="description">Shared publicly - <?php echo time_ago($post['post_date'])?></span>

                  </div>
                </div>

                <div class="box-body" style="display: block;">
                  <img class="img-responsive show-in-modal" src="<?php echo base_url('post_file/'.$post['post_image'])?>" alt="">
                  <input type="hidden" id="stid" value="<?php echo $post['spid']; ?>">
                  <p><?php echo $post['postcontent']?></p>
                  <button type="button" class="btn btn-default btn-xs"><i class="fa fa-share"></i> Share</button>
                  <div>

                  <input type="hidden" id="pl_postid" name="pl_postid" value="<?php echo $post['spid']; ?>">

                  <button type="button" class="btn btn-default btn-xs"><i class="fa fa-thumbs-o-up"></i> Like</button>
                 </div>
                  <span class="pull-right text-muted"><?php //echo $countlikes ?> likes - 3 comments</span>

                </div>
                  <div id="display_comment"></div>
                <div class="box-footer" style="display: block;">
                    <form id="com" class="com" method="post">
                    <div class="img-push">
                        <input type="hidden"  class="status_id" id="status_id" name="status_id" value="<?php echo $post['spid']; ?>">

                        <textarea  name="comment" id="comment" class="form-control input-sm comment" placeholder="Press enter to post comment"></textarea>

                         <div class="box-footer box-form">
                          <btn class="btn btn-azure btn-sm pull-right commentbt" id="commentbt">Comment</btn>
                    <ul class="nav nav-pills">
                        <li><i class="fa fa-bullhorn"></i></li>

                    </ul>
                </div>
                    </div>
                  </form>
                    </div>

              </div>
              <?php endforeach;?>

Jquery:

$(".commentbt").click(function(){
        var status_id = $(this).closest("div.img-push").find("input[name='status_id']").val();
        var comment = $(this).closest("div.img-push").find("textarea[name='comment']").val();
        alert(comment);

        var dataString = 'status_id='+ status_id +'&comment='+ comment;
        if(comment==''||status_id==''){
            alert('Can not send empty comment')
        }
        else{
            $('#display_comment').show();
            //$("#display_comment").fadeIn(100).html('<img src="<?php //echo base_url();?>uploads/ajax-loader.gif" />Loading Comment...');
            $.ajax({
               type:"POST",
               url:"<?php echo site_url('user/postcomment')?>",
               data:dataString,
               cache:false,
             success: function () {
         $(document).ready(function(){
        var status_id = $("#stid").val();
        $.post('<?php echo site_url('user/getcomments');?>',
        {
            status_id:status_id
        },
        function(data){
            $("#display_comment").html(data);
        });
    });


                    $('#com')[0].reset();
                }
            });
        }return false;
    });
});

Thanks

Answer 1

HTML Fixes:

Don't use the same ID on differents elements, like you are doing with display_comment . You are creating a set of posts with the foreach loop, so this will create multiple elements with the same ID . Use a custom class instead. Remenber there should not be more than one item with the same ID . The elements that where fixed are next ones:

<input type="hidden" id="stid" value="<?php echo $post['spid'];?>">

<input type="hidden" id="pl_postid" name="pl_postid" value="<?php echo $post['spid']; ?>">

<div id="display_comment"></div>

<form id="com" class="com" method="post">

<input type="hidden" class="status_id" id="status_id" name="status_id" value="<?php echo $post['spid'];?>">

<textarea name="comment" id="comment" class="form-control input-sm comment" placeholder="Press enter to post comment"></textarea>

<btn class="btn btn-azure btn-sm pull-right commentbt" id="commentbt">Comment</btn>

Since you are creating multiples box-widget , the previous elements will generate multiple of they with the same ID . The fixed code will be like this:

<div class="box box-widget">

  <div class="box-header with-border">
    <div class="user-block">
      <span class="description">Shared publicly - <?php echo time_ago($post['post_date'])?></span>
    </div>
  </div>

  <div class="box-body" style="display:block;">
    <img class="img-responsive show-in-modal" src="<?php echo base_url('post_file/'.$post['post_image'])?>" alt="">
    <input type="hidden" class="stid" value="<?php echo $post['spid'];?>">
    <p><?php echo $post['postcontent']?></p>
    <button type="button" class="btn btn-default btn-xs">
      <i class="fa fa-share"></i> Share
    </button>
    <div>
      <input type="hidden" class="pl_postid" name="pl_postid" value="<?php echo $post['spid']; ?>">
      <button type="button" class="btn btn-default btn-xs">
        <i class="fa fa-thumbs-o-up"></i> Like
      </button>
    </div>
    <span class="pull-right text-muted"><?php //echo $countlikes ?> likes - 3 comments</span>
  </div>

  <div class="display_comment"></div>

  <div class="box-footer" style="display:block;">
    <form class="com" method="post">
      <div class="img-push">
        <input type="hidden" class="status_id" name="status_id" value="<?php echo $post['spid'];?>">
        <textarea name="comment" class="form-control input-sm comment" placeholder="Press enter to post comment"></textarea>

        <div class="box-footer box-form">
          <btn class="btn btn-azure btn-sm pull-right commentbt">Comment</btn>
          <ul class="nav nav-pills">
            <li><i class="fa fa-bullhorn"></i></li>
          </ul>
        </div>
      </div>
    </form>
  </div>

</div>

JQUERY Fixes:

1) The main problem on this section is that you was targeting the elements by ID , and you had multiple elements with the same ID , so you probably was targeting only the first element with those ID that appears on the HTML. So, how to proceed? Try to find elements by the relation they have with the clicked button, like the approach you use for:

var status_id = $(this).closest("div.img-push").find("input[name='status_id']").val();

2) Another issue was using the $(document).ready() inside the ajax call, that was removed.

A fixed code should look like this:

$(".commentbt").click(function()
{
    var status_id = $(this).closest("div.img-push").find("input[name='status_id']").val();
    var comment = $(this).closest("div.img-push").find("textarea[name='comment']").val();

    alert(comment);

    var dataString = 'status_id=' + status_id + ' &comment=' + comment;

    if (comment == '' || status_id == '')
    {
        alert('Can not send empty comment')

        // Finish function here if error detected!
        return;
    }

    // The next line was fixed!
    //$('#display_comment').show();
    var dComment = $(this).closest(".box-widget").find(".display_comment");
    dComment.show();

    // The next line was also wrong (Homework for you...)
    //$("#display_comment").fadeIn(100).html('<img src="<?php //echo base_url();?>uploads/ajax-loader.gif" />Loading Comment...');

    // Save clicked button object, we going to need it inside the ajax.
    var clickedBtn = $(this);

    $.ajax({
        type: "POST",
        url: "<?php echo site_url('user/postcomment')?>",
        data: dataString,
        cache: false,
        success: function()
        {
            // Wrong again, the next line was fixed!!
            //var status_id = $("#stid").val();
            var status_id = clickedBtn.closest(".box-widget").find("input.stid").val();

            console.log("Getting comments for status_id = " + status_id);

            $.post(
                "<?php echo site_url('user/getcomments');?>",
                {status_id: status_id},
                function(data)
                {
                   // Wrong again! Fixed!
                   //$("#display_comment").html(data);
                   dComment.html(data);
                }
            );

            // Another error, guess what...
            //$('#com')[0].reset();
            clickedBtn.closest("form.com").reset();
        }
    });
});

Finally, i have to said, i really doubt your code will still work at all after all the changes i have made, but i hope at least you understood the mains issues you was committing.