告诉重定向以模式打开表单

Question

我正在通过打开模式填写表单（对项目的评论），我希望用户能够在提交后最终编辑该表单。

我目前正在从 jinja 模板触发模式，并且表单重定向到路由。 我怎样才能从我的新路线edit_review 重新打开模式，让用户有机会编辑他们的评论？

我在模态中的表单标签是：

<form method=POST action="{{ url_for('review_perfume', id=perfume._id) }}" id="form-review">

而我的review_perfume 路线是：

@app.route("/perfume/review/<id>", methods=["POST", "GET"])
@login_required
def review_perfume(id):
    form = AddReviewForm()
    perfume = mongo.db.perfumes.find_one({"_id": ObjectId(id)})
    if form.validate_on_submit():
        review_id = ObjectId.from_datetime(datetime.utcnow())
        mongo.db.perfumes.update(
            {"_id": perfume["_id"]},
            {
                "$push": {
                    "reviews": {
                        "_id": review_id,
                        "review_content": form.review.data,
                        "reviewer": current_user.username,
                        "date_reviewed": datetime.utcnow(),
                        "reviewer_picture": current_user.avatar,
                    }
                }
            },
        )
        flash("Your review has been received", "success")
        return redirect(url_for("perfume", id=perfume["_id"]))
    return redirect(url_for("perfume", id=perfume["_id"]))

我的edit_review 路线将包括：

@app.route("/edit_review/<review_id>/<perfume_id>")
@login_required
def edit_review(review_id, perfume_id):
    mongo.db.perfumes.update(
        {"_id": ObjectId(perfume_id), "reviews._id": ObjectId(review_id)},
        {"$set": {"reviews.$.review_content": "This is my newest content."}},
    )
    flash("Your review has been updated!", "success")
    return redirect(url_for("perfume", id=perfume_id))

（使用表单中的正确数据）但我想知道如何从中打开模式以更新我的数据库。

请帮忙？

谢谢！！

Answer 1

在您的路由中设置一个布尔变量，例如：show_modal_on_page_load，以表明您希望在页面加载时显示模式，并在您的 Jinja 模板中编写逻辑来显示给定变量状态的模式。

当您使用重定向时，有必要使用会话变量在重定向周围传递show_modal_on_page_load 状态。

以下是该过程的粗略草图：

from flask import Flask, render_template, redirect, url_for, request, session

@app.route("/edit_review/<review_id>/<perfume_id>")
@login_required
def edit_review(review_id, perfume_id):
    mongo.db.perfumes.update(
        {"_id": ObjectId(perfume_id), "reviews._id": ObjectId(review_id)},
        {"$set": {"reviews.$.review_content": "This is my newest content."}},
    )
    flash("Your review has been updated!", "success")
    session['show_modal_on_page_load'] = True
    return redirect(url_for("perfume", id=perfume_id))


@app.route("/perfume/<perfume_id>")
@login_required
def perfume(perfume_id):

    #  pop the variable of the session
    show_modal_on_page_load = session.pop('show_modal_on_page_load', False)

    ####

    return render_template('perfume.html', show_modal_on_page_load=show_modal_on_page_load)

有很多关于如何在 SO 上显示页面加载模式的示例，例如，Launch Bootstrap Modal on page load。

模板香水.html：

$(window).on('load',function(){
    {{ if show_modal_on_page_load }}
        var delayMs = 1500; // delay in milliseconds

        setTimeout(function(){
            $('#myModal').modal('show');
        }, delayMs);
    {{ endif }}
});

<div class="modal fade" id="myModal">
      <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">My Modal</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary mx-auto" data-dismiss="modal">Close</button>
                </div>
            </div>
      </div>
</div>