I have a page that allows users to post comments via jquery’s ajax. These comments can also be edited. The problem is that after i type a comment and click “edit” the jquery is not executed (ideally a modal should popup). When i type a comment, refresh and then click “edit” the jquery runs perfectly. I have been trying to debug this myself for quite some time, but I don’t see why the refresh makes the difference.
JQUERY:
//this part takes the comment and enters it into a mysql database and then appends the comments div to write the new comment. This code works.
$ ('#answerCommentTextarea').keypress(function(e) {
if(e.which == 13) {
if ($ .trim($ (this).val()) == ""){
$ ('#nocomment').modal('show');
}
else {
var comment = $ ('#answerCommentTextarea').val();
$ .post('../writeanswercomment.php' ,
{comment: comment , user: <?php echo $ _SESSION['id']; ?>, questionid: <?php echo $ _GET['q']; ?>},
function(response){
$ ('#answerCommentContainer').append(response);
$ ('#answerCommentTextarea').val('');
});
}
}
});
This is the output of writeanswercomment.php. This is the BAD code. When i click the edit button here, the below Jquery does not run. Even the preventDefault() doesnt work because # appears in the url
echo "<div class='singleComment'>
<b><a href='../profile.php?p=$ user'>$ name</a></b>
$ comment
<input type='hidden' value='$ qid' name='hiddenComment' class='hiddenComment' />
<a href='#' style='color: orange;' class='editComment'><b>Edit</b></a>
<div class='commentBar'>Just now</div>
</div>";
This is the Jquery that works after the refresh, but does not work when the comment is entered and edited without any refresh.
$ ('.editComment').click(function(e){
e.preventDefault();
var s_comment = $ (this).prev('.hiddenComment').attr('value');
$ .post('../editcomment.php' , {comment: s_comment} , function(response){
$ ('#modalEditComment').val(response);
$ ('#editCommentModal').modal('show');
});
});
If the comment is not entered via Jquery’s ajax then it was previously entered and stored in the database. This is the code that runs when a comment has already been entered. (This is the GOOD code. When i click the edit button, the above Jquery runs perfectly).
echo "<div class='singleComment'>
<b><a href='/profile.php?p=$ comment_user[$ a]'>$ name[$ a]</a></b> $ comment[$ a]
<input type='hidden' value='$ comment_id[$ a]' name='hiddenComment' class='hiddenComment'/>
";
$ current_time=time();
if ($ _SESSION['id'] == $ comment_user[$ a] && $ current_time - $ comment_time[$ a] <60){
echo " <a href='#' style='color: orange;' class='editComment'><b>Edit</b></a>";
}
$ periods = array("second", "minute", "hour", "day", "week", "month", "year", "decade");
$ lengths = array("60","60","24","7","4.35","12","10");
$ now = time();
$ difference = $ now - $ comment_time[$ a];
$ tense = "ago";
for($ j = 0; $ difference >= $ lengths[$ j] && $ j < count($ lengths)-1; $ j++) {
$ difference /= $ lengths[$ j];
}
$ difference = round($ difference);
if($ difference != 1) {
$ periods[$ j].= "s";
}
echo "<div class='commentBar'>$ difference $ periods[$ j] ago</div>
</div>";
