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>