Way to prevent history update?

1

Anyone know if there’s a way to stop an <a data-turbo-frame="my-frame">...</a> tag from advancing history?

My use case is that I’m filling a <turbo-frame id="my-frame"> modal with the response from the server, and I don’t want that page fetch to appear in history when back or forward buttons are pressed.

Thanks!

2

Are you saying the when clicking on a link you have will 1) load the turbo-frame and 2) update the URL history on the page and when you click back it shows the same page, but without the turbo-frame? (advancing history)

OR…

Are you saying that when clicking on a link you have will 1) load the turbo-frame and 2) when click the back button it leaves the page (which had the turbo-frame), but when clicking the forward button you do not want the turbo-frame to still be rendered on the page? (caching)

3

It’s currently working like this:

  1. Visit /resources
  2. Click on resource with e.g. <a data-turbo-frame="resource-modal">
  3. Modal appears, showing content from /resources/:resource/modal, <turbo-frame id="resource-modal">
  4. Click away from modal.
  5. Visit another page.
  6. Click Back
  7. /resources/:resource/modal is requested, rather than /resources.

#7 is where things go upside down. I believe #3 is leading to Turbo adding /resources/:resource/modal to History, when it ought not.

Thanks for responding, by the way!

4
  1. /resources/:resource/modal is requested, rather than /resources .

Are you saying the browser URL shows /resources/:resource/modal instead of /resources, or just the content on the page?

5

I’m saying /resources/:resource/modal is what is requested by Turbo, and returned by, the server. (I’m not concerned with what’s shown in the browser bar at the moment—not using data-turbo-action.)

Weirdly the browser moves back to the right page (/resources) without making a request to the server. (I’m assuming this is caching.) But then it initiates a call to /resources/:resource/modal. I’m assuming it’s because that’s the last route Turbo added to History.

Is this not expected behavior? As far as I can tell, Turbo should be doing this—it can’t tell a modal request from any other frame. I only want to tell Turbo to act slightly differently, that is, to not recall this route from History.

6

Turbo is not altering the history, but rather Turbo caches the page when leaving and then restores the page from a turbo-cache when returning. When returning, it cached the URL of the turbo-frame before leaving the page.

I recommend reading Navigate with Turbo Drive to better understand caching.

To solve your scenario,

OPTION 1:

Remove the turbo-frame before caching. This is a simple solution, although depending on your scenario it might break the page if wanting to re-initialize a turbo-frame after restoring the page via back/forward buttons.

<turbo-frame id="my-frame" data-turbo-cache="false">

OPTION 2:

Reset the turbo-frame src to blank when hiding the modal or before leaving the page.

7

Thank you! I was pulled to something else, so I was unable to give this a try. I’ll report back soon.

I admit, though, I’m still confused, because the documentation does talk about Drive pushing updates to the browser’s history:

Application visits result in a change to the browser’s history; the visit’s action determines how… The default visit action is advance . During an advance visit, Turbo Drives pushes a new entry onto the browser’s history stack using history.pushState .

But thank you, I’ll give this a try as soon as I can.

8

This is true when you don’t use turbo-frame

9

Great, #1 did not work, but #2 did :+1: