如何回复评论参考论坛中的评论ID

时间:2017-06-03 10:41:33

标签: php jquery ajax

我一直在与这段代码争夺数小时而没有任何进展。有人可以协助我解决这个问题吗? 我正在我的网站上的论坛页面上工作,评论和回复评论功能。 单击每个注释下的“回复”按钮,textarea会动态显示回复。回复将插入到数据库中,并带有回复ID和原始注释ID(回复原始注释时生成的id)。 我现在的挑战是对论坛上任何评论的回复似乎只引用最新评论的id(可能是因为回复表格是动态生成的)。因此,在我的数据库中,他们拥有最新评论的Id。这实际上意味着在获取时,回复将在最新评论下排队。我需要的是一种引用被回复的评论的ID的方式。 这是我的PHP代码:

<?php
        require("includes/conn.php");
        $stmt=$conn->prepare("SELECT post_id, user, topic, post, time FROM post_tb ORDER BY time DESC");
            $stmt->execute();
            $result = $stmt->get_result();
            $num_of_rows = $result->num_rows;
            if ($num_of_rows > 0){
                while ($row = $result->fetch_assoc()){
                    $post_id = $row['post_id'];
                    $user = $row['user'];
                    $topic = $row['topic'];
                    $post = $row['post'];
                    $time = $row['time'];
                    $time = date('M dS, Y g:i A', strtotime($time));
                    echo '<div>
                            <div>
                                <h5><strong>'.$user.'</strong></h5><h6>'.$time.'</h6>
                                <h5><strong>'.ucfirst($topic).'</strong></h5>
                                <p data-id="'.$post_id.'">'.$post.'</p>
                            </div>      
                            <div>
                                <button type="button" class="btn btn-primary rep" id="but_rep" data-id="'.$post_id.'">Reply</button>
                            </div>
                            <form id="comment_reply" data-id="'.$post_id.'" method="post" action="">
                                <input type="text" class="hidden" value="'.$post_id.'" id="post_id">
                                <input type="text" class="hidden" value="'.$user.'" id="user">
                                <textarea class="form-control" rows="3" name="post_rep" id="post_rep"></textarea>
                                <button type="submit" class="btn btn-primary" id="post_rep_sub">Submit</button>
                            </form>
                        <div/>';
                    }
                }
    ?>

我的Ajax / jquery在这里:

$("form#comment_reply").hide();//Comment reply form hidden at page load
//To hide reply button and show the reply form
$(document).on('click', 'button.rep', function(e){
    e.preventDefault();
    var closestDiv = $(this).closest('div');
    var closestForm = $(closestDiv).next('form#comment_reply');
    $(closestDiv).fadeOut();
    $(closestForm).fadeIn();
});
//To process comment reply
$(document).on("click", "form button#post_rep_sub", function(e){
        e.preventDefault();
    var reply = $("form textarea#post_rep").val();
    var name = $("input#user").val();
    var post_id = $("input#post_id").val();
    if (reply != ''){
        $.post('insert_post_reply.php', {'reply':reply, 'name':name, 'post_id':post_id}, function(data){
            if (data = 'yes'){
               $("form textarea#post_rep").val("");
               fetchCommentReply();
            }
        });
    }else{
        return false;
    }
});

2 个答案:

答案 0 :(得分:0)

我认为问题出在点击处理程序&#34;表单按钮#post_rep_sub&#34;

您使用以下语句阅读post_id:var post_id = $("input#post_id").val();但无论按哪个按钮,这总是会返回最后一个post_id。

要验证我的观点,您可以添加此内容并观察javascript-console:

var test1 = $("input#post_id");
var test2 = $("input#post_id").length;
console.log(test2);

如果您看到数字&gt; 1,那么您就知道要修复点击处理程序&#34;表单按钮#post_rep_sub&#34;

答案 1 :(得分:0)

主要问题是你的php代码使用相同的id多次生成html元素(例如按钮)!然后jquery只将自己附加到第一个按钮。 这已经用一个例子来解释:

How jQuery works when there are multiple elements with the same "id"?

解决方案:用name-attribute替换id!

根据HTML规范,id属性必须在页面上是唯一的(它不是网页设计师/开发人员刚刚发明的标准)

Is using the same id multiple times on a page bad practice even when I am not parsing through the page?

让我们仔细看看你的php产生了什么。您有多个具有相同ID的元素,例如id =&#34; but_rep&#34;多次生成。请注意,您只能在html文件中使用ID 一次! 因此,您不能假设jquery使用id可靠地附加事件处理程序!

                     <div>
                        <div>
                            <h5><strong>user 1</strong></h5><h6>'.$time.'</h6>
                            <h5><strong>topic 1</strong></h5>
                            <p data-id="101">post text1</p>
                        </div>      
                        <div>
                            <button type="button" class="btxtn btn-primary rep" id="but_rep" data-id="101">Reply</button>
                        </div>
                        <form id="comment_reply" data-id="101" method="post" action="">
                            <input type="text" class="hidden" value="101" id="post_id">
                            <input type="text" class="hidden" value="user 1" id="user">
                            <textarea class="form-control" rows="3" name="post_rep" id="post_rep"></textarea>
                            <button type="submit" class="btn btn-primary" id="post_rep_sub">Submit</button>
                        </form>
                    <div/> 
                    <div>
                        <div>
                            <h5><strong>user 2</strong></h5><h6>'.$time.'</h6>
                            <h5><strong>topic 2</strong></h5>
                            <p data-id="102">post text2</p>
                        </div>      
                        <div>
                            <button type="button" class="btxtn btn-primary rep" id="but_rep" data-id="102">Reply</button>
                        </div>
                        <form id="comment_reply" data-id="102" method="post" action="">
                            <input type="text" class="hidden" value="102" id="post_id">
                            <input type="text" class="hidden" value="user 2" id="user">
                            <textarea class="form-control" rows="3" name="post_rep" id="post_rep"></textarea>
                            <button type="submit" class="btn btn-primary" id="post_rep_sub">Submit</button>
                        </form>
                    <div/>