首页 > 解决方案 > Ajax 不会添加 div

问题描述

我有一个基本的评论部分,人们可以在其中提交反馈并回复其他人的反馈。我已经使用 ajax 提交了反馈并且它工作正常,div 被添加到父元素而不需要刷新。但是,当我尝试在反馈之前添加回复时,它不会更新内容,只有在我刷新后才会添加回复。回复 jquery

$(function () {
    const $replyForm = $('#send-reply-form');

    $replyForm.on('submit', function (event) {
        event.preventDefault();
        const dataToSend = $replyForm.serialize();

        $.post($replyForm.attr('action'), dataToSend, function (serverData) {
            $('.comments-list').prepend(serverData);
        })
    })
})

控制器:

[HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> AddReply(AddFeedbackViewModel model)
        {
            var feedbackModel = await this.feedbackService.AddReply(model);

            return this.PartialView("_ReplySectionPartial", feedbackModel);
        }

_ReplySectionPartial

@model FeedbackViewModel

<div class="single-comment replyComment justify-content-between d-flex">
    <div class="user justify-content-between d-flex">
        <div class="thumb">
            <img src="~/images/blog/c6.jpg" alt="">
        </div>
        <div class="desc">
            <h5>
                <a href="#">@Model.Name</a>
            </h5>
            <p class="date">@Model.CreatedOn.Value.ToLongDateString()</p>
            <p class="comment">
                @Model.Comment
            </p>
        </div>
    </div>
</div>

可能是什么问题,为什么在刷新之前它不会更新?

标签: jqueryasp.net.netajax

解决方案


我找到了一种解决方法,将 id 添加到父元素并使用它来添加它。

$(function () {
    const $replyForm = $('#send-reply-form');

    $replyForm.on('submit', function (event) {
        event.preventDefault();
        const dataToSend = $replyForm.serialize();

        const dataArray = $replyForm.serializeArray();
        var feedbackId = dataArray[0].value;

        const feedbackParentElement = $('#' + feedbackId);

        $.post($replyForm.attr('action'), dataToSend, function (serverData) {
            $(feedbackParentElement).prepend(serverData);
        })
    })
})

推荐阅读