# Refresh a turbo frame with a button in Flask app

**URL:** <https://discuss.hotwired.dev/t/refresh-a-turbo-frame-with-a-button-in-flask-app/3985>\
**Category:** General\
**Created:** [March 31, 2022, 11:38am UTC](https://discuss.hotwired.dev/t/refresh-a-turbo-frame-with-a-button-in-flask-app/3985 "2022-03-31T11:38:30Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Anthogr](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/anthogr/32/2648_2.png) [@Anthogr](https://discuss.hotwired.dev/u/Anthogr)\
**Post date:** [March 31, 2022, 11:38am UTC](https://discuss.hotwired.dev/t/refresh-a-turbo-frame-with-a-button-in-flask-app/3985/1 "2022-03-31T11:38:30Z")

</div>

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:

```auto
<!--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>

```

 ![Capture d’écran 2022-03-31 à 13.20.24](https://canada1.discourse-cdn.com/flex027/uploads/stimulusjs/original/2X/a/afeb806762bd0ac97a48ea4a68f93d33d7b4ea2f.png)

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

```auto
@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:

```auto
turbo.stream([
turbo.update(target="data_frame-" + section)
])

```

with this turbo frame in the `taskManager.html` for the **New task** button:

```auto
<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](https://discuss.hotwired.dev/t/right-way-to-update-a-turbo-frame-and-an-area-outside-of-turbo-frame-with-one-turbo-frame-response/2898) 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 !!!

---

<div class="post-metadata">

**Author:** ![Anthogr](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/anthogr/32/2648_2.png) [@Anthogr](https://discuss.hotwired.dev/u/Anthogr)\
**Post date:** [April 12, 2022, 3:44pm UTC](https://discuss.hotwired.dev/t/refresh-a-turbo-frame-with-a-button-in-flask-app/3985/2 "2022-04-12T15:44:33Z")

</div>

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

```auto
<!--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>
    </form>
</div>

```

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

---

<div class="post-metadata">

**Author:** ![Anthogr](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/anthogr/32/2648_2.png) [@Anthogr](https://discuss.hotwired.dev/u/Anthogr)\
**Post date:** [April 29, 2022, 2:26pm UTC](https://discuss.hotwired.dev/t/refresh-a-turbo-frame-with-a-button-in-flask-app/3985/3 "2022-04-29T14:26:10Z")

</div>

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 !