Hotwire Discussion

Way to prevent history update?

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!

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)

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!

  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?

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.

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.

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.

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

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