Hello,
I am trying to build a simple “todo” flask app with a SQLAchemy database.
The tasks are spread by sections meaning when you add a task, you can choose its section (project 1, project 2,…) then write the concerned task (check the image below to see how it is organised).
Once I implemented all the functionalities I wanted, I ran into the issue which was the page got refreshed each time I triggered a button (add/edit/delete/update_status).
Then I found out Hotwire which is amazing to handle this.
This my taskManager.html
organization:
<!--New task button-->
<button class="btn" onclick="openAddForm()">...</button>
<div class="form-popup" id="myForm">...</div>
<!--Display section and task-->
<div class="flex-row">
{% for section in sections %}
<turbo-frame id="data_frame-{{ section }}">
<div class="flex-column">
<h2>{{ section }}</h2>
{% for task in tasks %}
{% if task.section == section %}
<p>{{ task }}</p>
<button class="satus"></button>
<button class="edit"></button>
<div class="form-popup" id="form-{{ task.id }}">...</div>
<button class="delete"></button>
<div class="form-popup" id="form-{{ task.id }}">...</div>
{% endif %}
{% endfor %}
</div>
</turbo-frame>
{% endfor %}
</div>
Using a turbo frame with id data_frame-{{ section }}
(one for each section) allowed to avoid page refresh for status, edit and delete buttons. However as the New task button is out of theses turbo frames i’m struggling to make it only refresh the concerned data_frame-{{ section }}
.
This is my add_task
route in app.py
:
@app.route('/add', methods=['GET', 'POST'])
def add_task():
content = request.form.get('content')
section = request.form.get('section')
task = Task(content=content, section=section)
db.session.add(task)
db.session.commit()
return redirect(url_for('taskManager'))
I was thinking to use turbo stream in the add_task
route:
turbo.stream([
turbo.update(target="data_frame-" + section)
])
with this turbo frame in the taskManager.html
for the New task button:
<turbo-frame id="button">
<form action="/add" method="post">
<button class="btn" ...>...</button>
...
but the turbo.update
needs a content
argument meaning you replace the target
by the content
and in my case I just want a simple refresh of the target: data_frame-{{ section }}
I also tried to use turbo frame for this New task button but I didn’t manage to target this data_frame-{{ section }}
neither.
Maybe my approach is not right for what I want to achieve…
This post looks similar but I didn’t manage to make the link with my case.
Do you know a way to do that ?
Hope it was clear and thank you for your help !!!