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元素，然后執行所需的任何操作-清理並重寫所有評論-或僅在必要時附加評論（並刪除其他已刪除的）。

您的from.find（“ ul.comments”）應該返回注釋類的每個無序列表。 您想遍歷“要更新的狀態”列表，並按ID查找相應的無序列表。

本示例假定ID為123的StatusObject的無序列表的ID為“ StatusUL123”。

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