评论仅适用于第一篇文章

Question

I coded a status-box. It was successful. Then I coded the comments system for the status. It all went fine. But there is a problem in it.

Problem: When there is more than one status posted, it only allows comments on the first status. If I try to post a comment on the second status, it won't load the AJAX request. I tried checking the Dev console too, but it didn't show anything.

Note: I load the statuses by AJAX into the main page. The comment is posted by a JavaScript function, which sends the $.ajax({type: "post"}); request to the file which retrieves the text, user ID and everything from the URL to save it into the database.

Please tell me if there is any logic in it, and what could be the problem.

jQuery AJAX function to POST comment

function send(id, post_id) {
    var pos = $("#txt").val();
    var post = pos.trim();
    if(post !== '') {
        $.ajax({
            url: 'comment.php?id='+id+'&post_id='+post_id+'&post='+post,
            type: "POST",
            success: function() {
                reload();
            }
        });
    }
}

This is how I call it:

<textarea cols="70" id="txt" placeholder="Write a comment.." class="input-user"></textarea><br />
<br />
<input type="submit" value="Post" style="background: #f2f2f2; width: 60px; height: 40px; padding: 5px; border-radius: 5px;" onclick="javascript:send('<?php echo $_SESSION['id']; ?>', '<?php echo $post['id']; ?>');" />

The comment.php file:

<?php 
include("includes/config.php");
include("includes/bbcode.php");
 $id = intval($_GET['id']);
$post_id = intval($_GET['post_id']);
 $pos = bbcode($_GET['post']);
$post = mysqli_real_escape_string($con, $pos);
  $post_comment = mysqli_query($con, "INSERT INTO comments(post_id, user_id, comment) VALUES('".$post_id."', '".$id."', '".$post."')") or die(mysqli_error($con));
 ?>

Again: All this is working only for the first post, ie, you can only comment on the first post and if you try to comment on the second or later posts AJAX doesn't even send a request..

Answer 1

The reason is because when you are using id="txt" repeatedly. The script will only recognize the first one, after that you are toast. Also as @shut mentioned id's need to be unique. Change it to a class class="txt"

var pos = $(".txt").val();

Then call your function as such

$('form').on('click','.txt',function() {
    send('id_1', 'post_id_1');
});

function send(id, post_id) {
    var pos = $(".txt").val();
    var post = pos.trim();
    if(post !== '') {
        $.ajax({
            url: 'comment.php?id='+id+'&post_id='+post_id+'&post='+post,
            type: "POST",
            success: function() {

            }
        });
    }
}

Assuming you have a separate form for each one

<form>
<textarea cols="70" class="txt" placeholder="Write a comment.." class="input-user"></textarea><br />
<br />
<input type="button" value="Post" class="txt" style="background: #f2f2f2; width: 60px; height: 40px; padding: 5px; border-radius: 5px;" onclick="javascript:send('<?php echo $_SESSION['id']; ?>', '<?php echo $post['id']; ?>');" />
</form>

Answer 2

id of any element must be unique. you are using comment box having id txt for all post then it always pick the data from the first textarea (for first post) which is blank in case of other post and AJAX doesn't send a request if the value of textarea is blank.