预填充 WTForms 字段的当前值以对其进行编辑

Question

我在模态中有一个表单，用于编辑对某个项目（香水）的评论。一款香水可以有多个评论，评论存在于一系列嵌套文档中，每个文档都有自己的 _id。

我正在通过将 EditReviewForm 提交到此edit_review路线来编辑每个特定评论（以防用户想要在提交后编辑他们对香水的评论）：

@reviews.route("/review", methods=["GET", "POST"])
@login_required
def edit_review():
    form = EditReviewForm()
    review_id = request.form.get("review_id")
    perfume_id = request.form.get("perfume_id")
    if form.validate_on_submit():
        mongo.db.perfumes.update(
            {"_id": ObjectId(perfume_id), <I edit my review here> })
        return redirect(url_for("perfumes.perfume", perfume_id=perfume_id))
    return redirect(url_for("perfumes.perfume", perfume_id=perfume_id))

这条路线重定向到我的香水路线，其中显示了香水及其包含的所有评论。

这是perfume路线：

@perfumes.route("/perfume/<perfume_id>", methods=["GET"])
def perfume(perfume_id):
    current_perfume = mongo.db.perfumes.find_one({"_id": ObjectId(perfume_id)})
    add_review_form = AddReviewForm()
    edit_review_form = EditReviewForm()
    cur = mongo.db.perfumes.aggregate(etc)
    edit_review_form.review.data = current_perfume['reviews'][0]['review_content']
    return render_template(
        "pages/perfume.html",
        title="Perfumes",
        cursor=cur,
        perfume=current_perfume,
        add_review_form=add_review_form,
        edit_review_form=edit_review_form
    )

我的问题

找到一种方法来获取该review _id过程并将其放入我的perfume路线中，以便我可以使用当前值预先填充我的 EditReviewForm。否则，对于编辑评论的用户来说，表单看起来是空的。

通过硬编码索引（在本例中为索引 [0]）：

edit_review_form.review.data = current_perfume['reviews'][0]['review_content']

我确实在显示当前值，但当然所有评论的值都相同，因为评论在模板中循环，我需要获取每个 review_id 的值。

在我放弃允许用户编辑评论的想法之前，有没有办法做到这一点？:D

如果我的问题很清楚或者需要更多信息，请告诉我。

非常感谢提前！

更新 2：

试图进一步减少我当前的模板情况以使其更清晰：

带有评论的模态是从perfume-reviews.html, 从这个按钮触发的：

<div class="card-header">
    <button type="button" class="btn edit-review" data-perfume_id="{{perfume['_id']}}" data-review_id="{{review['_id']}}" data-toggle="modal" data-target="#editReviewPerfumeModal" id="editFormButton">Edit</button>
</div>

这将打开带有评论的表单所在的模式（有问题的字段是textarea当前显示来自 CKEditor 的 WYSIWYG：

<div class="modal-body">
    <form method=POST action="{{ url_for('reviews.edit_review') }}" id="form-edit-review">
        <div class="form-group" id="reviewContent">
            {{ edit_review_form.review(class="form-control ckeditor", placeholder="Review")}}
        </div>
    </form>
</div>

目前这不起作用：

$(document).on("click", "#editFormButton", function (e) {
    var reviewText = $(this)
        .parents(div.card.container)
        .siblings("div#reviewContent")
        .children()
        .text();
    $("input#editReviewContent").val(reviewText);
});

并抛出一个ReferenceError: div is not defined.

我在哪里失败了？（也许不止一个地方？）

更新 3：

这是按钮打开模态的地方，在它下面是评论内容显示的地方：

<div class="card container">
    <div class="row">
        <div class="card-header col-9">
            <h5>{{review['reviewer'] }} said on {{ review.date_reviewed.strftime('%d-%m-%Y') }}</h5>
        </div>
        <div class="card-header col-3">
            <button type="button" class="btn btn-success btn-sm mt-2 edit-review float-right ml-2" data-perfume_id="{{perfume['_id']}}" data-review_id="{{review['_id']}}" data-toggle="modal" data-target="#editReviewPerfumeModal" id="editFormButton">Edit</button>
        </div>
    </div>
    <div class="p-3 row">
        <div class=" col-10" id="reviewContent">
            <li>{{ review['review_content'] | safe }}</li>
        </div>
    </div>
</div>

Answer 1

您可以使用jQuery来完成此操作，因为当您打开表单时，表单将自动显示评论内容。这将通过操纵 dom 来完成。

另外，向您的编辑按钮添加一个 id，在本例中，我给它一个 id“editFormButton”。

同样，在评论内容所在的div中添加一个id，以便更容易选择，我给它一个id“reviewContent”

同样，添加一个id，就像edit_review_form.review这样edit_review_form.review(id='editReviewContent')

<script>
$(document).on("click", "#editFormButton", function (e) {
 var reviewText = $(this)
        .parents("div.row")
        .siblings("div.p-3.row")
        .children("div#reviewContent")
        .children()
        .text();
    $("input#editReviewContent").val(reviewText);
});
</script>

不要忘记包含 jQuery。

另外，您可以使用纯 JavaScript 来完成。您可以轻松地在谷歌上搜索上述等效内容。这篇文章是一个好的开始！