how can I reload a single turbo frame and update the url?

Question

how can I reload a single turbo frame and update the url?

8.3k Views Asked by Alex028502 At 17 April 2025 at 15:48

I have tried to make a minimal example that doesn't involve any specific server side technology. So I have just generate the webpage with bash and serve it with cgi.

$ mkdir example
$ cd example
$ cat > index.html
<meta http-equiv="Refresh" content="0; url='/cgi-bin/index.html'" />

$ mkdir cgi-bin
$ cat > cgi-bin/index.html
#! /usr/bin/env bash

set -e

echo Content-Type: text/html
echo
sed "s/NEW/$RANDOM/g" << EOF
<html>
  <head>
    <title>DEMO</title>
    <script src="/node_modules/@hotwired/turbo/dist/turbo.es2017-umd.js"></script>
  </head>
  <body>
    <h1>DEMO</h1>
    <p><small>lucky bonus number: $RANDOM</small></p>
    <turbo-frame id='example-frame'>
        <a href="?NEW">NEW turbo frame</a><br />
        <a href="?NEW" data-turbo-frame="_top">NEW full page</a>
        <p>number in query string: $QUERY_STRING</p>
    </turbo-frame>
    <br />
  </body>
</html>
EOF


$ chmod +x cgi-bin/index.html
$ npm install --save @hotwired/[email protected]
$ python3 -m http.server --cgi # or whichever server

This creates a webpage that looks like this:

Then when you click on turbo frame reloader link, you get this:

The lucky bonus number has not changed because it only loaded the turbo frame, but the query string number, which is displayed inside the turbo frame has been updated.

The full page turbo link does this:

It updates the lucky bonus number (content outside the turbo frame) and updates the url. (I am sure it is working properly though. I have checked the network tab. It is only doing a fetch each time.)

What I would like to do:

I would like to have a link that only updates the turbo frame (leaves the lucky bonus number unchanged in my example) but also updates the url. I guess the use case is if you have a banner or menu that always stays the same, but a primary turbo frame with all the page specific content that should correspond to the url.

So in this example, I would like to see both the query string on the page, and the actual query string update, leaving only the "lucky bonus number" unchanged.

Original Q&A

There are 1 best solutions below

**aidan** · Answer 1

This is definitely possible, though it requires some substantive changes to your implementation. Basically, you need to use Turbo Streams for the partial page replacement.

You need a 2nd file to request, one which has Content-Type text/vnd.turbo-stream.html.
Partial page reloads work just fine without Javascript (i.e. leave bonus number unchanged while updating inside the turbo frame), but if you want to update the URL, you'll need some JS.

See this gist for an extended version of your code. Below are the most important bits, mainly a new file template.html.

index.html is unchanged.

webpage/cgi-bin/index.html

Here I just changed the link tags. Full page reload requests index.html, where the Turbo-enabled link requests the turbo-stream-enabled template.html For some reason I needed to add data-turbo=true on the Turbo-enabled link; being inside a turbo frame wasn't enough. data-turbo-action=replace is supposed to be the HTML attribute that "replaces" the location value in the URL. That doesn't seem to be behaving like I expect from the docs.

#! /usr/bin/env bash

set -e

echo Content-Type: text/html
echo
sed "s/NEW/$RANDOM/g" << EOF
<html>
  <head>
    <title>DEMO</title>
    <script src="/node_modules/@hotwired/turbo/dist/turbo.es2017-umd.js"></script>
  </head>
  <body>
    <h1>DEMO</h1>
    <p><small>lucky bonus number: $RANDOM</small></p>
    <turbo-frame id='example-frame'>
        <a href="template.html?NEW" data-turbo="true" data-turbo-action="replace">
          NEW turbo frame
        </a><br />
        <a href="index.html?NEW" data-turbo="false">
          NEW full page
        </a>
        <p>number in query string: $QUERY_STRING</p>
    </turbo-frame>
    <br />
  </body>
</html>
EOF

webpage/cgi-bin/template.html

This is the most important bit. Your server must respond with a turbo-stream tag, with the action replace (because you want to replace HTML content) and with the target attribute set to your turbo-frame's id (because that's the content you wish to replace).

#! /usr/bin/env bash

set -e

echo Content-Type: text/vnd.turbo-stream.html; charset=utf-8
echo
sed "s/NEW/$RANDOM/g" << EOF
<turbo-stream action="replace" target="example-frame">
    <template>
        <turbo-frame id='example-frame'>
            <a href="template.html?NEW" data-turbo="true" data-turbo-action="replace">
              NEW turbo frame
            </a><br />
            <a href="index.html?NEW" data-turbo="false">
              NEW full page
            </a>
            <p>number in query string: $QUERY_STRING</p>
        </turbo-frame>
    </template>
</turbo-stream>
EOF

To test:

open index.html in a browser
click the 'full page' link, observe that bonus number changes, query string is now in URL and on the page. You got this part already.
click the 'turbo frame' link, observe that bonus number doesn't change, query string is on the page BUT not in the URL. This is not all of what you asked for, but its close.
open up DevTools, in JS console execute

Turbo.visit(`template.html?${<any number here>}`)
for example:
Turbo.visit(`template.html?${new Date().valueOf()}`)

observe that bonus number does not change, the links get new random numbers, and the query string is BOTH in the URL and on the page. You can do this repeatedly and keep refreshing your turbo frame. This is what you asked for, and it seems to require some JS. I'll update my answer if I find any other html attributes that could obviate the need for JS.

how can I reload a single turbo frame and update the url?

There are 1 best solutions below

webpage/cgi-bin/index.html

webpage/cgi-bin/template.html

To test:

Related Questions in HOTWIRE-RAILS

Related Questions in TURBO-FRAMES

Trending Questions

Popular # Hahtags

Popular Questions