[英]How to display comments for all post
我有一个发布和评论系统。 像Facebook的帖子和评论系统。 帖子显示正确,我可以对所有帖子发表评论。 但是评论仅显示在第一个帖子上,即该帖子显示在顶部。 。 我需要您帮助的问题如下:-每个帖子的评论应相应显示。
这些是我所做的。 视图:
<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
项目不得超过一个。 固定的元素是下一个:
<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
元素。 固定代码将如下所示:
<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
的第一个元素。 那么,如何进行呢? 尝试通过元素与单击按钮的关系来查找元素,例如用于以下方法:
var status_id = $(this).closest("div.img-push").find("input[name='status_id']").val();
2)另一个问题是在ajax调用中使用了$(document).ready()
,该问题已被删除。
固定代码应如下所示:
$(".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();
}
});
});
最后,我不得不说,我真的怀疑您的代码在进行了所有更改之后是否仍然可以正常工作,但是我希望至少您了解您提交的主要问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.