如何显示所有帖子的评论 [英] How to display comments for all post
问题描述
我有一个帖子和评论系统.诸如Facebook帖子和评论系统之类的东西.帖子显示正确，我可以对所有帖子发表评论.但是评论仅显示在第一条帖子上，即顶部显示的帖子. . 我需要您协助的问题如下: -每个帖子的评论都应相应显示.
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 i.e 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;
});
});
谢谢
推荐答案
HTML修复:
不要像在处理display_comment时那样在differents元素上使用相同的ID.您正在使用foreach循环创建一组帖子，因此这将创建具有相同ID的多个元素.请改用自定义类. 注意事项，最多只能有一个具有相同ID的项目.固定的元素是下一个:
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>
由于要创建多个box-widget，因此先前的元素将使用相同的ID生成多个元素.固定代码如下:
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修复:
1)此部分的主要问题是您按ID定位了元素，并且多个元素具有相同的ID，因此您可能只定位了第一个元素以及HTML上显示的ID元素.那么，如何进行呢?尝试通过与单击按钮之间的关系来查找元素，就像您使用的方法一样:
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)另一个问题是在ajax调用中使用了$(document).ready()，该问题已被删除.
2) Another issue was using the $(document).ready() inside the ajax call, that was removed.
固定代码应如下所示:
$(".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.
这篇关于如何显示所有帖子的评论的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
