Question

我创建了一个类似于社交媒体的小应用，用户可以在其中创建状态更新＆＃34;并评论他们。我正在获取所有＆＃34;状态更新＆＃34;以及来自数据库的PHP注释，并使用PHP foreach()循环显示所有这些注释。

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

以下是我加注的一部分（仅限评论部分）：

<?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

如果您有＆＃34;状态＆＃34;在数据库中有一个ID列（或任何主/唯一键），您可以将其拉出并为其分配相应的无序列表ID（或将无序列表放在具有该ID的容器div中）。

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

你的from.find（＆＃34; ul.comments＆＃34;）应该返回评论类的每个无序列表。您希望遍历您的状态以更新＆＃34;列表并按ID查找相应的无序列表。

此示例假设ID为＆＃34; StatusUL123＆＃34;对于ID为123的StatusObject的无序列表。

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

成功调用后，jQuery AJAX再次加载精确的div

3 个答案: