CodeIgniter reply using ajax only works on first data - php

Question

Here is my Ajax and what I want is to send a reply into a certain comment but it only works on the last comment that is inserted into the database. I think the model and controller works fine.
$(document).ready(function() {
$('#btn_ReplyComment').click(function(){
var commentReply = $('#commentReply').val();
var ReplyDate = $('#ReplyDate').val();
var commentID = $('#commentID').val();
$.ajax({
type:'POST',
data: {commentReply: commentReply, ReplyDate: ReplyDate, commentID: commentID},
url: '<?php echo site_url('Isidran/Reply_Comment'); ?>',
})
})
});
and my modal
<?php foreach ($showComment as $row): ?>
<div>
<h4><?php echo $row['username'].":" ?> </h4>
<?php echo $row['comDate'] ?><br />
<?php echo $row['comment'] ?><br />
//button to trigger modal
<button id="com_btn_2" class="btn btn-success btn-sm" data-toggle="modal" data-target="#myModal1<?php echo $row['commentID'] ?>">reply</button>
</div>
<hr> </hr>
//modal to reply into comment only works on the last entered comment
<!-- Modal -->
<div id="myModal1<?php echo $row['commentID'] ?>" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Reply to this Comment?</h4>
</div>
<div class="modal-body">
<h3><p><?php echo $row['comment'] ?></p></h3>
<h5>Reply:</h5>
<?php $date = date('Y-m-d G:i:s'); ?>
<textarea class="form-control" style="resize:none;" id="commentReply" name="commentReply" maxlength="160" rows="5" cols="50"></textarea>
<input type="hidden" id="ReplyDate" value="<?php echo $date; ?>">
<input type="hidden" id="commentID" value="<?php echo $row['commentID']; ?>">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-danger" data-dismiss="modal" id="btn_ReplyComment">Send</button>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
controller:
public function Reply_Comment(){
$this->Blog_model->login();
if($this->session->userdata('userID')){
$userID =$this->session->userID;
$username =$this->session->username;
$reply = $this->input->post('commentReply',true);
$commentID = $this->input->post('commentID',true);
$ReplyDate = $this->input->post('ReplyDate',true);
$data['replyComment']=$this->Blog_model->replyComment($commentID, $userID, $username, $reply, $ReplyDate);
} else {
redirect('CodeSmart/loginFail' , 'refresh');
}
}
model:
public function replyComment($commentID, $userID, $username, $reply, $ReplyDate){
if($commentID && $userID && $username && $reply && $ReplyDate){
$query = $this->db->query("INSERT INTO `blog`.`tbl_reply` (comment_id, reply_user_id, reply_username, reply, replydate) VALUES ('$commentID', '$userID', '$username', '$reply', '$ReplyDate')");
}
}

Answer 1

Yes your controller and model there are no issues. The problem is in foreach you are looping that model. There are so many ids with same name like ReplyDate, commentID, etc. So there are no difference with all of them. So in jquery it taking first value. To avoid this problem. You can use like below code
In your view
<?php foreach ($showComment as $row): ?>
<div>
<h4><?php echo $row['username'].":" ?> </h4>
<?php echo $row['comDate'] ?><br />
<?php echo $row['comment'] ?><br />
//button to trigger modal
<button id="com_btn_2" class="btn btn-success btn-sm" data-toggle="modal" data-target="#myModal1<?php echo $row['commentID'] ?>">reply</button>
</div>
<hr> </hr>
//modal to reply into comment only works on the last entered comment
<!-- Modal -->
<div id="myModal1<?php echo $row['commentID'] ?>" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Reply to this Comment?</h4>
</div>
<div class="modal-body">
<h3><p><?php echo $row['comment'] ?></p></h3>
<h5>Reply:</h5>
<?php $date = date('Y-m-d G:i:s'); ?>
<textarea class="form-control" style="resize:none;" id="commentReply<?php echo $row['commentID'] ?>" name="commentReply" maxlength="160" rows="5" cols="50"></textarea>
<input type="hidden" id="ReplyDate<?php echo $row['commentID'] ?>" value="<?php echo $date; ?>">
<input type="hidden" id="commentID<?php echo $row['commentID'] ?>" value="<?php echo $row['commentID']; ?>">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-danger" data-dismiss="modal" id="btn_ReplyComment" onclick="add_comment(<?php echo $row['commentID'] ?>); ">Send</button>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
And your script
<script type="text/javascript">
function add_comment(id) {
var commentReply = $('#commentReply'+id).val();
var ReplyDate = $('#ReplyDate'+id).val();
var commentID = $('#commentID'+id).val();
$.ajax({
type:'POST',
data: {commentReply: commentReply, ReplyDate: ReplyDate, commentID: commentID},
url: '<?php echo site_url('Isidran/Reply_Comment'); ?>',
})
}
</script>
It will work as you expected.