title: how can I reload a single turbo frame and update the url?
body: <p>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.</p>
  <pre><code>$ mkdir example
  $ cd example
  $ cat &gt; index.html
  &lt;meta http-equiv=&quot;Refresh&quot; content=&quot;0; url='/cgi-bin/index.html'&quot; /&gt;
  
  $ mkdir cgi-bin
  $ cat &gt; cgi-bin/index.html
  #! /usr/bin/env bash
  
  set -e
  
  echo Content-Type: text/html
  echo
  sed &quot;s/NEW/$RANDOM/g&quot; &lt;&lt; EOF
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;DEMO&lt;/title&gt;
      &lt;script src=&quot;/node_modules/@hotwired/turbo/dist/turbo.es2017-umd.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h1&gt;DEMO&lt;/h1&gt;
      &lt;p&gt;&lt;small&gt;lucky bonus number: $RANDOM&lt;/small&gt;&lt;/p&gt;
      &lt;turbo-frame id='example-frame'&gt;
          &lt;a href=&quot;?NEW&quot;&gt;NEW turbo frame&lt;/a&gt;&lt;br /&gt;
          &lt;a href=&quot;?NEW&quot; data-turbo-frame=&quot;_top&quot;&gt;NEW full page&lt;/a&gt;
          &lt;p&gt;number in query string: $QUERY_STRING&lt;/p&gt;
      &lt;/turbo-frame&gt;
      &lt;br /&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  EOF
  
  
  $ chmod +x cgi-bin/index.html
  $ npm install --save @hotwired/turbo@7.0.1
  $ python3 -m http.server --cgi # or whichever server
  </code></pre>
  <p>This creates a webpage that looks like this:</p>
  <p><a href="https://i.stack.imgur.com/6IB0M.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6IB0M.png" alt="initial page with no query string" /></a></p>
  <p>Then when you click on turbo frame reloader link, you get this:</p>
  <p><a href="https://i.stack.imgur.com/wLQiP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wLQiP.png" alt="page with updated query string number, same bonus number, and no url change" /></a></p>
  <p>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.</p>
  <p>The full page turbo link does this:</p>
  <p><a href="https://i.stack.imgur.com/1Kt9o.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1Kt9o.png" alt="page with updated url and updated lucky bonus number" /></a></p>
  <p>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.)</p>
  <hr />
  <p><strong>What I would like to do:</strong></p>
  <p>I would like to have a link that only updates the turbo frame (leaves the lucky bonus number unchanged in my example) but <em>also</em> 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.</p>
  <p>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 &quot;lucky bonus number&quot; unchanged.</p>