Przekazanie wartości do i z modala (framework Bulma) we Flasku

Rozwiązany problem: jak przekazać wartość do okna modalnego oraz jak przekazać wartość z okna modalnego do aplikacji we Flasku.

W przedstawianym przypadku każdy wiersz tabeli html zawiera przycisk umożliwiający anulowanie kontraktu. Dane dla poszczególnych wierszy są przekazywane z kontrolera za pomocą zmiennej contracts:

result = Contract.query.filter_by(
            customer_id=current_user.id).filter(
                Contract.status!='cancelled').order_by(
                    Contract.id.desc()).paginate(page=page, per_page=per_page)
return render_template('contracts.html', title='Contracts', header=columns, contracts=result)

Dane dla wierszy są dostępne w szablonie:

{% for contract in contracts.items %}
    <tr>
        <td>{{  loop.index  }}</td>
        {% for item in header %}
            <td>
                 {{ contract[item] }}
            </td>
        {% endfor %}
    </tr>
{% endfor %}

Oprócz danych przekazanych z kontrolera należy dla każdego wiersza tabeli utworzyć przycisk uruchamiający odpowiedni modal – różniący się wartością parametru data-target tzn.

<button class="button mr-2 modal-button" data-target="modal{{contract.id}}"  title="Cancel Contract">

Wartość parametru data-target będzie się różnić dla każdego wiersza w zależności od wartości contract.id , która to wartość jest unikatowa – klucz tabeli Contract.

W zależności od wartości parametru data-target uruchamiany jest modal o takiej samej wartości parametru id, tzn.

<div id="modal{{contract.id}}" class="modal">

Modal zawiera przycisk do zatwierdzenia zmian, w tym przypadku do anulowania kontraktu. Aby przekazać, jaki kontrakt ma zostać anulowany należy podać id kontraktu jako parametr do funkcji url_for() , tzn.

<form action="{{ url_for('contracts.cancel_contract', id=contract.id) }}">
            <button class="button is-danger is-rounded" formmethod="POST">Yes</button>
</form>

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *