jQuery AJAX在呼叫成功后再次加载确切的div

Question

我创建了一个类似于社交媒体的小应用，人们可以在其中创建“状态更新”并对其进行评论。我使用PHP从数据库中提取所有“状态更新”，并使用PHP的foreach()循环显示它们。

我的目标是每次用户发布评论时，它都会将评论存储在数据库中而不刷新页面（明显），然后再次加载ul.comments。问题是，因为我使用foreach（）循环获取这些状态更新，所以有几个ul.comments，我的当前JS脚本无法确定哪些ul.comments需要更新。

这里是我的加价部分（仅注释部分）：

<?php if($comments = $this->comment_model->getComments($event['event_id'])):?> 
    <?php foreach($comments as $comment):?> 
    <ul class="comments"> 
    <li> 
    <a href="<?=base_url()?>user/<?=$comment['user_id']?>"> 
     <img class="comment-img" src="<?=base_url()?>public/images/uploads/<?=$comment['profilepic']?>" alt="prof-img"/> 
    </a> 

    <a href="<?=base_url()?>user/<?=$comment['user_id']?>"> 
     <span class="comment-name"><?=$comment['name']?></span> 
    </a> 

    <span class="comment-comment"><?=$comment['comment']?></span> 

    <?php if($comment['user_id'] == $this->session->userdata('user_id') || $this->session->userdata('user_type') == 1):?> 
     <a href="<?=base_url()?>comments/delete/<?=$comment['id']?>">Delete</a>    
    <?php endif?> 

    <span class="comment-date"><?=date('d.m.Y G:i', strtotime($comment['commented_at']))?></span> 
    </li>   
    </ul> 
    <?php endforeach ?> 
<?php endif?> 

这是我的AJAX调用张贴评论：

$("form.add-comment").on('submit', function(e) { 
     var from = $(this); 
      $.ajax({ 
       url: from.attr('action'), 
       type: from.attr('method'), 
       data: $(from).serialize(), 
       dataType: 'json', 
       beforeSend: function() { 
         from.find(".comment_submit").hide(); 
         from.find("#spinner_comment").show(); 
        }, 
        success: function(data) { 
         if(data.st == 0) { 
          for(var key in data.msg) { 
           console.log(data); 
          } 

         } 
         if(data.st == 1) { 
          $("#event_comment").val(''); 
          $.get(window.location,function(data){ 
           $data = $.parseHTML(data);  
           $("ul.comments",from).html($("ul.comments",$data).html()); 
           }); 
         } 

        }, complete: function() { 
         from.find("#spinner_comment").hide(); 
         from.find(".comment_submit").show(); 
        } 
       }); 
      e.preventDefault(); 
     }); 

而这里的我的CI控制器/张贴评论的方法

public function add() { 

     if($_SERVER['REQUEST_METHOD'] == 'POST') { 

     $this->form_validation->set_rules('event_comment', 'Comment', 'required|htmlspecialchars'); 

      if($this->form_validation->run() === false) { 

       $this->output->set_content_type('application_json'); 
       $this->output->set_output(json_encode(array('st' => 0))); 
       return false; 

      } else { 

       $data = array (
          'event_id' => $this->input->post('event_id'), 
          'user_id' => $this->session->userdata('user_id'), 
          'comment' => $this->input->post('event_comment') 
         ); 

        $add_comment = $this->comment_model->addComment($data); 
      } 

      if($add_comment === true) { 

       $this->output->set_content_type('application_json'); 
       $this->output->set_output(json_encode(array('st' => 1))); 
       return false; 

      } else { 

       $this->output->set_content_type('application_json'); 
       $this->output->set_output(json_encode(array('st' => 0))); 
       return false; 
      } 

     } 
    } 

Answer 1

您正在每个循环中创建一个新的ul。留下单独的ul并遍历li元素，并为它们提供一个标识符，您可以在其中标识哪个帖子必须更新。

Answer 2

我想这是因为你的网址没有找到/或没有加载。

相反的：

from.find('ul.comments').load(window.location+' ul.comments'); 

试试这个：

$.get(window.location,function(data){ 
    $data = $.parseHTML(data);  
    $("ul.comments",from).html($("ul.comments",$data).html()); 
}); 

Answer 3

如果你的 “状态” 在你的数据库中的ID列（或任何主/唯一键），你可以拉那和为其分配相应的无序列表ID（或者将无序列表放入具有该ID的容器div中）。

然后，当您使用javascript更新评论时，您可以通过其ID调用无序列表或div元素，并执行所需的任何操作 - wh擦干净并重写所有评论 - 或仅附加注释必要的（并删除已被删除的其他人）。

您的from.find（“ul.comments”）应返回comments类的每一个无序列表。你想遍历你的“状态更新”列表并找到相应的无序列表，通过ID。

这个例子假定为ID的无序列表StatusObject的“StatusUL123”的ID 123

foreach (StatusObject in NewStatusObjects) 
{ 
    $("#StatusUL" + StatusObject.ID).empty(); //clears UL 

    foreach (CommentObject in StatusObject.CommentObjects){ 
     $("#StatusUL" + StatusObject.ID).append("<li ID='CommentLI" + CommentObject.ID + "'>" + CommentObject.Info + "</li>"); 
    } 
}