# How to auto-reload frame?

**URL:** <https://discuss.hotwired.dev/t/how-to-auto-reload-frame/1872>\
**Category:** General\
**Created:** [January 5, 2021, 12:27pm UTC](https://discuss.hotwired.dev/t/how-to-auto-reload-frame/1872 "2021-01-05T12:27:20Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![ledermann](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/ledermann/32/1320_2.png) [@ledermann](https://discuss.hotwired.dev/u/ledermann)\
**Post date:** [January 5, 2021, 12:27pm UTC](https://discuss.hotwired.dev/t/how-to-auto-reload-frame/1872/1 "2021-01-05T12:27:20Z")

</div>

I’m playing around with Turbo frames using Rails. A TurboFrame can be lazy-loaded by using the `src` attribute. This is great, but what about **auto-reloading a frame** every few seconds?

I want to display a time series chart which needs to update itself. There is no server side event for doing a TurboStream broadcast. A simple polling mechanism is required. How can the frame reload itself?

---

<div class="post-metadata">

**Author:** ![stgm](https://avatars.discourse-cdn.com/v4/letter/s/e0b2c6/32.png) [@stgm](https://discuss.hotwired.dev/u/stgm)\
**Post date:** [January 5, 2021, 12:43pm UTC](https://discuss.hotwired.dev/t/how-to-auto-reload-frame/1872/2 "2021-01-05T12:43:57Z")

</div>

Could this topic be of use?

> [@Triggering Turbo Frame with JS](https://discuss.hotwired.dev/t/triggering-turbo-frame-with-js/1622):
>
> While playing around with Turbo (so cool) I was trying to build a simple way to filter a list while typing. The way I accomplished this was: inside of a Turbo Frame I put the search field in a form that points to a Rails controller action. The Rails controller action searches the db and filters based on the search param. the controller detects that the request format is turbo\_stream and renders a turbo\_stream template with all the filtered results a separate results div is replaced with the tu…

---

<div class="post-metadata">

**Author:** ![ledermann](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/ledermann/32/1320_2.png) [@ledermann](https://discuss.hotwired.dev/u/ledermann)\
**Post date:** [January 5, 2021, 2:34pm UTC](https://discuss.hotwired.dev/t/how-to-auto-reload-frame/1872/3 "2021-01-05T14:34:58Z")

</div>

Thanks, it seems that `Turbo.visit()` can load a frame, too. But it changes the URL in the address bar (pushes to history), so it does not help me yet. I’m looking for a way to fetch a frame and do the div replacement - nothing more.

Currently I’m trying to understand the Turbo sources…

---

<div class="post-metadata">

**Author:** ![stgm](https://avatars.discourse-cdn.com/v4/letter/s/e0b2c6/32.png) [@stgm](https://discuss.hotwired.dev/u/stgm)\
**Post date:** [January 5, 2021, 4:59pm UTC](https://discuss.hotwired.dev/t/how-to-auto-reload-frame/1872/4 "2021-01-05T16:59:17Z")

</div>

Ah, I see that the previous discussions have mostly been focused on forms.

What about setting the frame `src` to (the same) URL in your code? I’ve tried manually setting the `src` for a `turbo-frame` element repeatedly and it does make Turbo fetch a new version each time.

---

<div class="post-metadata">

**Author:** ![ledermann](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/ledermann/32/1320_2.png) [@ledermann](https://discuss.hotwired.dev/u/ledermann)\
**Post date:** [January 6, 2021, 8:30am UTC](https://discuss.hotwired.dev/t/how-to-auto-reload-frame/1872/5 "2021-01-06T08:30:36Z")

</div>

Thanks a lot, @stgm, setting the `src` attribute to trigger a reload works fine!

Now I’ve made this Stimulus.js controller:

```javascript
// app/javascript/controllers/refresh_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
  static values = {
    src: String
  }

  connect() {
    this.timeout = setTimeout(() => {
      this.element.setAttribute('src', this.srcValue)
    }, 5000);
  }

  disconnect() {
    clearTimeout(this.timeout)
  }
}

```

Usage in a Rails partial:

```auto
<%= turbo_frame_tag 'stats', 
      data: { controller: 'refresh', refresh_src_value: request.path } do %>
  <p>Updated content</p>
<% end %>

```

---

<div class="post-metadata">

**Author:** ![fschwahn](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/fschwahn/32/1387_2.png) [@fschwahn](https://discuss.hotwired.dev/u/fschwahn)\
**Post date:** [October 19, 2021, 3:26pm UTC](https://discuss.hotwired.dev/t/how-to-auto-reload-frame/1872/6 "2021-10-19T15:26:52Z")

</div>

This is cool, thanks for that. However, I couldn’t get it to continually poll, it just refreshes the turbo-frame once.

I want to poll a turbo-frame continually until a background job is finished, and then show the result (and stop polling). I don’t see how to make this work with turbo-frames, as it only replaces the contents, but does not update the attributes of the turbo-frame.

Is something like that possible with turbo-frames?

---

<div class="post-metadata">

**Author:** ![defsdoor](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/defsdoor/32/2135_2.png) [@defsdoor](https://discuss.hotwired.dev/u/defsdoor)\
**Post date:** [October 20, 2021, 9:52am UTC](https://discuss.hotwired.dev/t/how-to-auto-reload-frame/1872/7 "2021-10-20T09:52:31Z")

</div>

There’s a reload method on a frame now - just call that if you want to refetch the contents.

Previous to this you could achieve a reload by changing the src attribute and changing it back, which is exactly that the reload method does 🙂

```javascript
  reload() {
    const {src: src} = this;
    this.src = null;
    this.src = src;
  }

```