预填充 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 的所见即所得：

<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"。

同理，给review内容所在的div添加一个id，方便select，我已经给了id"reviewContent"

同样的，给edit_review_form.review添加一个id，像这样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 来完成。您可以在 google 上轻松搜索上述等价物。这article是一个好的开始！

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

Pre-populate current value of WTForms field in order to edit it

javascript

python

jinja2

flask

flask-wtforms