Hotwire Discussion

How to auto-reload frame?

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?

Could this topic be of use?

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…

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.

1 Like

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

Now I’ve made this Stimulus.js controller:

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

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