web-dev-qa-db-ja.com

編集するために、WTFormsフィールドの現在の値を事前入力します

アイテム（香水）のレビューを編集するために使用するモーダル内のフォームがあります。香水は複数のレビューを持つことができ、レビューはネストされたドキュメントの配列にあり、それぞれに独自の_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>
javascriptpythonflaskjinja2flask-wtforms
7
Guillermo Brachetta

jQuery を使用してこれを行うことができます。フォームを開くと、フォームはそこにレビューコンテンツを自動的に表示します。それは、domを操作することによって行われます。

また、編集ボタンにIDを追加します。この例では、IDに「editFormButton」を指定しています。

同様に、レビューコンテンツが存在するdivにIDを追加して、選択がより簡単になるように、「reviewContent」というIDを割り当てました

同様に、このように_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で上記の同等のものを簡単に検索できます。この 記事 は良いスタートです！

1
Kartikeya Sharma