web-dev-qa-db-fra.com

Préremplissez la valeur actuelle du champ WTForms afin de la modifier

J'ai un formulaire dans un modal que j'utilise pour modifier une critique sur un article (un parfum). Un parfum peut avoir plusieurs critiques, et les critiques vivent dans un tableau de documents imbriqués, chacun avec son propre identifiant.

J'édite chaque avis particulier (au cas où un utilisateur souhaite modifier son avis sur le parfum une fois qu'il a été soumis) en soumettant le EditReviewForm à ce edit_review route:

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

Et cette route redirige vers ma route de parfum, qui montre le parfum et toutes les critiques qu'il contient.

Voici la route 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
    )

Mon problème

Pour trouver un moyen d'obtenir le review _id dans ce processus et l'avoir dans mon perfume route, afin que je puisse pré-remplir mon EditReviewForm avec la valeur actuelle. Sinon, le formulaire semble vide à l'utilisateur qui modifie sa critique.

En codant en dur un index (index [0] dans ce cas):

edit_review_form.review.data = current_perfume['reviews'][0]['review_content']

J'affiche en effet les valeurs actuelles, mais bien sûr la même valeur pour toutes les critiques, car les critiques sont en boucle dans le modèle, et j'ai besoin d'obtenir la valeur de chaque review_id.

Existe-t-il un moyen de le faire, avant que j'abandonne l'idée de permettre aux utilisateurs de modifier leurs avis? :RÉ

Veuillez me faire savoir si ma question est claire ou si des informations supplémentaires sont nécessaires.

Merci beaucoup d'avance!!

MISE À JOUR 2:

Essayer de réduire davantage ma situation actuelle de modèle pour la rendre plus claire:

Le modal avec l'avis est déclenché depuis perfume-reviews.html, à partir de ce bouton:

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

Et cela ouvre le modal où se trouve mon formulaire avec la révision (le champ en question est un textarea affichant actuellement un WYSIWYG de CKEditor:

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

Actuellement, cela ne fonctionne pas:

$(document).on("click", "#editFormButton", function (e) {
    var reviewText = $(this)
        .parents(div.card.container)
        .siblings("div#reviewContent")
        .children()
        .text();
    $("input#editReviewContent").val(reviewText);
});

et jette un ReferenceError: div is not defined.

Où est-ce que j'échoue ici? (Peut-être à plus d'un endroit?)

MISE À JOUR 3:

c'est là que le bouton ouvre le modal, et en dessous, c'est là que le contenu de l'avis s'affiche:

<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

Vous pouvez le faire avec jQuery car lorsque vous ouvrez le formulaire, le formulaire affichera automatiquement le contenu de la révision. Cela se fera en manipulant le dom.

Aussi, ajoutez un identifiant à votre bouton d'édition, dans cet exemple, je lui ai donné un identifiant "editFormButton".

De même, ajoutez un identifiant au div dans lequel se trouve le contenu de la critique afin qu'il soit plus facile à sélectionner, je lui ai donné un identifiant "reviewContent"

De même, ajoutez un identifiant à edit_review_form.review Comme ceci 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>

N'oubliez pas d'inclure jQuery.

En outre, vous pouvez le faire avec du javascript pur. Vous pouvez facilement rechercher les équivalents ci-dessus sur Google. Ce article est un bon début!

1
Kartikeya Sharma