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>"); 
    } 
}