What is a "Refresh"?

1

The Turbo handbook mentions a “Refresh” and from what I understand, there’s no option in Turbo 8 to enable morphing for navigation events that are not Refreshes.

However, the docs don’t mention what Refreshes actually are and how to trigger them outside of <turbo-stream action="refresh"></turbo-stream>

Is there any way other than the turbo-stream action to trigger a Refresh event, especially whithin a turbo-frame?

2

I’ve had the same question and from my research, a refresh is triggered when posting to the current URL or performing a GET request to the current URL on a page.

If I have a search/filter form that posts back to the current URL, and the response renders a page, the contents are refreshed and my scroll position is maintained.

I think redirecting on a POST back to the previous location will also trigger a refresh.

As far as refreshing around a turbo frame:

You can trigger a refresh with Javascript with Turbo.visit(window.location.href, {action: "replace"}). You need to use action = replace because if you advance the browser history a refresh will not be performed.

I use this fact to handle form submissions in modal dialog frames by responding with HTTP status 205 (reset content) to redirect back to the current page and perform a refresh.

I hook into the turbo:submit-end event of my form, and on status 205 I visit the current location to perform a refrsh:

  let response = e.detail?.fetchResponse?.response;
  let status = response?.status;
  let url = response?.headers?.get("Location") ?? null;

  if (status === 205) {
    // Reset Content - perform a refresh with turbo
    Turbo.visit(window.location.href, {action: "replace"})
  } else if (status === 201) {
    // Created - perform a visit with turbo
    if (!url) {
      throw new Error("201 Created status requires a Location header")
    }
    Turbo.visit(url, {action: "advance"})
  }

In my case, I also close the modal dialog before refreshing.

Hope this helps, I found this aspect of turbo refresh confusing as well.

1 Like