javascript - 预填充 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”

同样，在 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是一个好的开始!