Refresh a turbo frame with a button in Flask app


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-{{ }}">...</div>
                        <button class="delete"></button>
                        <div class="form-popup" id="form-{{ }}">...</div>
                    {% endif %}
                {% endfor %}
    {% endfor %}

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.route('/add', methods=['GET', 'POST'])
def add_task():
content = request.form.get('content')
section = request.form.get('section')
task = Task(content=content, section=section)
return redirect(url_for('taskManager'))

I was thinking to use turbo stream in the add_task route:[
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 !!!

By adding data-turbo-frame to the form in the taskManager.html I kind of managed to do what I want:

<!--New task button-->
<button class="btn" onclick="openAddForm()">...</button>
<div class="form-popup" id="myForm">
    <form action="{{ url_for('add_task') }}" class="form-container" method="POST" data-turbo-frame="data_frame-Section 1">
        <input type="text" id="section" name="section" required>
        <input type="text" id="content" name="content" required>

But I’m still struggling with data-turbo-frame that should be equal to a variable (to target dynamically the different existing sections) and not a constant "data_frame-Section 1"

Anyone has a suggestion for this ?

Thank you

I finally managed to do what I wanted, it was actually very simple, I complicated matters a lot with what I wanted to do in my first post …

Instead of using several turbo frames with id data_frame-{{ section }} I used only 1 turbo frame (with id data_frame) encompassing all the sections. Then I use data-turbo-frame=data_frame in the form submission (check my previous post) and everything works like charm !