使用Codeigniter 3.0.3
在视图中有一个foreach循环来获取数据库中的所有帖子,并且在每个循环的末尾都有一个带有post id的表单,用于将数据发布到控制器以将其插入到数据库中的comments_table
但是表单仅适用于第一个帖子或第一个循环,但另一个循环不起作用
内部模型我只需要来自会话的评论者ID和来自post-id attr的post id和来自input [type =" text"]的comment_text,使用comment-text调用
这里的javascript
<script type="text/javascript">
$(document).ready(function() {
$('#addcommentajax').submit(function() {
var commenter_id = "<?php echo $this->session->userdata('id'); ?>";
var comment_text = $("#comment-text").val();
var post_id = $(this).attr('post-id');
jQuery.ajax({
type: "POST",
url: "<?php echo base_url('home/addcomment'); ?>",
dataType: "json",
data: {commenter_id, post_id, comment_text},
success: function(commented) {
if(commented == true) {
window.location.reload(true);
alert('commented');
}
}
});
});
});
</script>
这里是php foreach循环,用他自己的评论表单显示帖子
<?php if($allposts): ?>
<?php foreach ($allposts as $post): ?>
<div class="panel panel-default">
<div class="panel-body">
<div class="col-md-12" style="padding: 0;">
<img class="img-rounded pull-left" src="<? echo base_url($post->image) ?>" width=30px height=30px>
<div style="margin-top: 5px;">
<a href="<? echo base_url('home?p=Profile&u='.$post->post_author) ?>"><small style="margin-left: 5px;"><?=$post->post_author?></small></a>
<span style="font-size: 75%;" class="text-muted pull-right"><span class="fa fa-clock-o"></span>
<?php $post_date = $post->post_date; $now = time(); $units = 1; ?>
<? echo timespan($post_date, $now, $units) ?>
ago</span>
</div>
</div>
<div class="clear"></div>
<hr class="myown">
<div class="col-md-12 text-muted"><small><?=$post->post_text?></small></div>
<div class="clear"></div>
<hr class="myown">
<div class="btn-group">
<?php if($this->users_model->liked($post->pid)): ?>
<a class="btn btn-default btn-sm disabled"><span class="fa fa-check"></span> Liked</a>
<?php else: ?>
<a class="btn btn-default btn-sm like-btn" post-id="<?=$post->pid?>"><span data-toggle-tooltip="tooltip" data-placement="top" title="Like" class="fa fa-thumbs-up fa-lg"></span></a>
<?php endif; ?>
<a class="btn btn-default btn-sm" data-toggle="collapse" data-target="#<?=$post->pid?>Comment"><span data-toggle-tooltip="tooltip" data-placement="top" title="Comment" class="fa fa-comment fa-lg"></span></a>
<a class="btn btn-default btn-sm"><span data-toggle-tooltip="tooltip" data-placement="top" title="Share" class="fa fa-share fa-lg"></span></a>
</div>
<div class="pull-right-custom text-muted"><small><?=$post->post_likes?> Like - <?=$post->post_comments?> Comment</small></div>
<div class="clear"></div>
<div id="<?=$post->pid?>Comment" class="collapse">
<br>
<form name="addcommentajax" id="addcommentajax" post-id="<?=$post->pid?>" class="form-horizontal" role="form" method="POST">
<div class="input-group">
<input type="text" id="comment-text" class="form-control input-sm" placeholder="Add Comment">
<span class="input-group-btn">
<button type="submit" class="btn btn-sm btn-default">Publish</button>
</span>
</div>
</form>
</div>
</div>
</div>
<?php endforeach; ?>
<?php endif; ?>
答案 0 :(得分:0)
如上所述,您有重复的ID,这是不允许的。没有两个元素应该具有相同的id。
但是类可能会重复,因此将addcommentajax
从id更改为类:
<form name="addcommentajax" post-id="<?=$post->pid?>" class="addcommentajax form-horizontal" role="form" method="POST">
在jQuery中,使用类选择器而不是id选择器。
$('.addcommentajax').submit(function() {...});
答案 1 :(得分:0)
表单的name
和id
属性为meant be unique
。在循环中,您将为所有表单分配相同的ID和名称。因此,您的脚本首次出现。将您的表单名称更改为唯一名称,而不是使用id作为选择器为表单指定一个类。
例如:假设帖子ID是唯一的
<?php if($allposts): ?>
<?php foreach ($allposts as $post): ?>
...................
...................
<form name="addcommentajax<?=$post->pid?>" class="addcommentajax" data-post-id="<?=$post->pid?>" class="form-horizontal" role="form" method="POST">
..................
................
</form>
<?php endforeach; ?>
<?php endif; ?>
在javascript中
$('.addcommentajax').submit(function() {
..........
.............
});
答案 2 :(得分:0)
通过更改每个循环的输入类名来解决
我在输入中使用了class="comment-<?php echo $post->pid; ?>"
更改java脚本
来自:
var comment_text = $("#comment-text").val();
var post_id = $(this).attr('post-id');
要:
var post_id = $(this).attr('post-id');
var comment_text = $(".comment-"+post_id).val();