首页 > 解决方案 > 告诉重定向以模式打开表单

问题描述

我正在通过打开模式填写表单(对项目的评论),我想让用户在提交表单后最终可以编辑该表单。

我目前正在从 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))

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

请帮忙?

谢谢!!

标签: pythonmongodbflaskjinja2

解决方案


在您的路线中设置一个布尔变量,例如: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>

推荐阅读