Question

我的项目是一种博客，有帖子和评论区。我试图让它与jquery ajax异步。我的问题是，当一个新的注释被异步插入时，它会在div中出现两次，所有其他注释都会消失。如果我刷新页面看起来很好。

查看：

<section id="comments_section_<?php echo $p1['post_id'];?>"> //THIS IS THE OUTPUT WHERE NEW COMMENTS WILL BE APPENDED

     <?php 
       $data['comments'] = $this->model_mutamba->getComments($p1['post_id']); 

       if($data['comments'] != ""){ ?>
               <div class="comments_container" id="comments_container_<?php echo $p1['post_id'];?>">

        <?php   foreach ($data['comments'] as $c){ 
                $user_img3 = $this->model_mutamba->getUserPicId($c->aluno_id);
               ?>
             <div>
                <img style="height:32px;" src="<?php echo site_url();?>img/users/portfolio/<?php echo $user_img3;?>" alt="" class="align-left" />
                <p>
                    <?php echo $this->model_mutamba->addSmilies($c->comment);?>
                    <br>
                    <span class="comments_date">
                        <?php 
                              $c_date = explode('-', substr($c->comment_date,0,-8));

                              $date_num_word = monthNumToWords($c_date[1]);

                        echo substr($c->comment_date, 11,-3)." ".$c_date[2]." de ". $date_num_word . " ". $c_date[0];?>
                    </span>

                </p>

           </div>


      <?php } ?>
       </div>

       <?php  } ?>

 </section>

JS：

 function comment(post_id,input){


    var comment = $(input).val();
    var output = '#comments_section_'+post_id;

    if(comment != ""){
        $.ajax({
                type:"POST",
                url:base_url+"mutamba/insertNewComment",
                data: {comment: comment, post_id:post_id},
                cache:false,
                success:function(response){
                    $(output).html(response);
                $(output).append(response);

                }
        });


    }
}

CONTROLLER：

function insertNewComment(){
     if($this->session->userdata('is_logged_in')){

            $email= $this->session->userdata('email');
            $comment= $this->FilterData($this->input->post('comment'));
            $post_id= $this->FilterData($this->input->post('post_id'));

            $this->load->model('model_mutamba');
            if($this->model_mutamba->insertNewComment($email,$comment,$post_id)){
                  $this->load->model('model_user');


                 $count = $this->model_mutamba->countPostComments($post_id);
                  ?>
                <script>
                var count = '<?php echo $count;?>';
                var comments_count = '<?php echo "#comments_count_".$post_id;?>';
                var content = "";

                if(count == 1){
                    content = '<span  class="comments_count">'+count+'</span> Comentário';
                }else{
                     content = '<span  class="comments_count">'+count+'</span> Comentários';
                }

                $(comments_count).html(content);

                </script>

                     <?php 
                     $this->load->model('model_user');
                    $user_img = $this->model_user->getUserPic($email);

                           echo '
                         <div>
                            <img style="height:32px;" src="'.site_url().'img/users/portfolio/'.$user_img.'" alt="" class="align-left" />
                            <p>
                               '.$this->model_mutamba->addSmilies($comment).'
                                <br>
                                <span class="comments_date">';
                                           $date = date(date('Y-m-d H:i:s'));
                                          $c_date = explode('-', substr($date,0,-8));

                                          $date_num_word = monthNumToWords($date[1]);

                                    echo substr($date, 11,-3)." ".$c_date[2]." de ". $date_num_word . " ". $c_date[0].'
                                </span>

                            </p>

                       </div>';




            }

      }else{
         redirect("inicio");
            }

 }

非常感谢任何帮助，提前致谢

Answer 1

这种情况正在发生，因为在您的AJAX success回调中，您正在添加对output TWICE 的响应 - 一次使用.html()，然后再使用{{ 1}}。

.append()删除了您网页中之前的HTML，这就是为什么您没有看到其他评论，并且会向其添加.html(response)。

使用response，它会在.append(response)的底部添加response，这就是您看到响应两次的原因！

从div回调中删除 $(output).html(response)，它会正常工作。

所以，你的功能需要看起来像这样：

success

Answer 2

function comment(post_id,input){
var comment = $(input).val();
var output = '#comments_section_'+post_id;

if(comment != ""){
    $.ajax({
            type:"POST",
            url:base_url+"mutamba/insertNewComment",
            data: {comment: comment, post_id:post_id},
            cache:false,
            success:function(response){
                //$(output).html(response);    //Comment this line or the line below it.
            $(output).append(response);
            }
    });
}

}

Answer 3

<div id="appenddiv">
  <h1>append</h1>
</div>

<script type="text/javacript">
 $("#appenddiv").append('<b>hello world</b>');

</script>

通过jquery将内容附加到div

3 个答案: