Tell a redirect to open a form in a modal

Question

I'm filling in a form (a review on an item) by opening a modal and I would like to give users the possibility to edit that form eventually after submitting it.

I'm currently triggering the modal from a jinja template and the form redirects to a route. How could I re-open the modal from my new route edit_review to give users the chance to edit their reviews?

my form tag in the modal is:

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

and my review_perfume route is:

@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"]))

My edit_review route will include:

@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))

(With the correct data from the form) but I'd like to know how to open the modal from it in order to update my db.

Please help?

Thank you!!

score 0 · Answer 1 · answered May 18 '20 at 12:22

Set a boolean variable, ex: show_modal_on_page_load, in your route to indicate that you would like the modal to be shown on page load and in your Jinja template write logic that shows the modal given the variable's state.

As you are using redirects it will be necessary to use session variables to pass the show_modal_on_page_load state around the redirects.

Here's a rough sketch of the process:

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)

There are lots of examples of how to show a modal on page load on SO, for example, Launch Bootstrap Modal on page load.

Template perfume.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>

Tell a redirect to open a form in a modal

1 Answers1