Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
631 views
in Technique[技术] by (71.8m points)

javascript - 应该从db发布帖子的代码,用户可以对其发表评论,并且评论发布在父帖子下方(the code supposed to POST posts from db , user be able to comment on them, and the comments posted below the parent post)

[picture][1] While trying to pull up the posts with their associated comments this happens

([picture][1] 尝试拉出带有相关评论的帖子时,发生了这种情况)


' picture '[this image is just the posts and need the comments below them ] When pulling the posts and replies together the errors above occurs(block 2), the posts and comments are associated with post_id and shows correctly in db , just need help when pulling the posts and comments and making sure the comments are under the correct post.

(' picture '[此图像仅是帖子,并且需要其下的注释] 当将这些帖子并回复在一起时,会发生上述错误(方框2),这些帖子和注释与post_id相关联并正确显示在db中,只需要帮助在提取帖子和评论并确保评论在正确的帖子下时。)

the issue occurs when changing code from block 1 to block 2

(将代码从块1更改为块2时会发生此问题)

BLOCK 1:this part prints the posts just fine and only posts using php

(块1:这部分打印的帖子很好,只有使用php的帖子)

function createPostRow($data){
           return'
         <div class="well well-sm">
            <div class="card-body">
                <div class="card-title">'.$data['title'].' <br> '.$data['body'].' <br><span 
                 class="time">'.$data['date_time'].'</span> </div>
                <div class = "pull-right user">'.$data['fname'].' '.$data['lname'].'</div>
                <div class="comment"><a href="javascript:void(0)" data-postID="'.$data['post_id'].'" 
                onclick="comment(this)">COMMENT</a></div>

               <div class="comments">/*this is where the comments to posts go*/ </div>
                        </div>
                      </div>
             ';
        }

BLOCK 2 this part has added parts from the above, the added parts are to retrieve and posts and comments together.THIS IS WHERE THE ISSUE IS THIS BLOCK it is same as the above block , but added is comments .

(第2块,该部分已从上面添加了部分,添加的部分是一起检索和发布以及评论。这是在此块中,与上面的块相同,但增加了注释。)

function createPostRow($data){
  global $con;
   $response = '
 <div class="well well-sm">
    <div class="card-body">
        <div class="card-title">'.$data['title'].' <br> '.$data['body'].' <br><span class="time">'.$data['date_time'].'</span> </div>
        <div class = "pull-right user">'.$data['fname'].' '.$data['lname'].'</div>
        <div class="comment"><a href="javascript:void(0)" data-postID="'.$data['post_id'].'" 
 onclick="comment(this)">COMMENT</a></div>

        <div class="comments"></div>';
$sql = $con->query("SELECT comments.comment_id, fname,lname, content, DATE_FORMAT(comments.date_time, '%Y-%m-%d') AS date_time FROM comments INNER JOIN user ON comments.username = user.username WHERE comments.post_id = '".$data['post_id']."' ORDER BY comments.comment_id DESC LIMIT 1");
    while($dataR = $sql->fetch_assoc())
        $response .= createPostRow($dataR);

    echo $response; '
                </div>
              </div>

     ';
return $response;
}

the rest of the code

(其余代码)

    if (isset($_POST['getAllPosts'])) {
                $start = $con->real_escape_string($_POST['start']);

                $response = "";
                $sql = $con->query("SELECT posts.post_id,title, fname,lname, body ,DATE_FORMAT(posts.date_time, '%Y-%m-%d') AS date_time FROM posts INNER JOIN user ON posts.username = user.username ORDER BY posts.post_id DESC LIMIT $start, 20");
                while($data = $sql->fetch_assoc())
                    $response .= createPostRow($data);

                exit($response);
            }
            ?>


> the html




    <!--- Home Posts : where createRowPost go --->
         <div class="container-cards-home col-xl-6 userPosts"> </div>


        <!--the reply input and button included into each post , works just fine and able send comments to  db--!>
        <div class="row commentRow" style="display:none">
         <div class="col-md-12">
          <textarea class="form-conrol" id="commentPost" placeholder="Add Comment" ></textarea>
           <button style="float:right;margin-left: 2px ;" class="btn-default btn-sm" onclick="$('.commentRow').hide();">Close</button>
            <button style="float:right; " class="btn-primary btn-sm" id="addComment">Add Comment</button>
         </div>
        </div>

        <script type="text/javascript">

           this fucntion will at the click of the comment button will send the  intput data to saveComment ,          where it is saved to my dabase


                $("#addComment").on('click', function () {
                    var comment;
                        comment = $("#commentPost").val();

                    if (comment.length > 1) {
                        $.ajax({
                            url: 'saveComment.php',
                            method: 'POST',
                            dataType: 'text',
                            data: {
                                addComment: 1,
                                comment:comment,
                                postID:postID

                            }, success: function (response) {
                               $("#commentPost").val("");
                               $(".commentRow").hide();
                               window.location = window.location;
                                                                   }
                        });
                    } else
                        alert('Please Check Your Inputs');
                });


this function will gets the posts from db

           function getAllPosts(start, max){

                    if (start > max){
                        return;
                    }
                    $.ajax({
                    url: 'home.php',
                    method: 'POST',
                    dataType: 'text',
                    data: {
                        getAllPosts: 1,
                        start: start
                    }, success: function (response) {
                        $(".userPosts").append(response);
                        getAllPosts((start+20), max);
                    }
                } ) ;
                }    




this getAllPosts will initiate the above code

             getAllPosts(0, 2);




this will add the comment box in posts

                function comment(caller) {
                postID = $(caller).attr('data-postID');
                $(".commentRow").insertAfter($(caller));
                $('.commentRow').show();
            }
             </script>






  [2]: https://i.stack.imgur.com/sSBhA.jpg
  ask by ilimdar shakirov translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
等待大神答复

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...