I’m getting familiar with Turbo (amazing project) and got into trouble with understanding what’s going on here and why it behaves as it does. I’ll show it on simple example.
Goal: span#my_element_id would get updated with random number on link click, URL shouldn’t change on click
<turbo-frame> <p> <span id="my_element_id">unknown</span> <a href="/app/get-random-number"> Randomize </a> </p> </turbo-frame> <a href="/app/different-page">Go to other page</a>
/app/get-random-number returns response like this (with random number obv.):
<turbo-stream action="update" target="my_element_id"><template>5970</template></turbo-stream>
All works as expected in this event flow (I’m logging all the events to see the flow):
- (number is updated in UI)
Until I click on „Go to other page“ link.
- (number is updated in UI, I can see it)
- I move to
My question: why is there a
fetch() for /app/get-random-number before moving to different page?
General goal is: click on a link to do some action on the server, receive
turbo-stream(s) with UI changes, update UI and that’s all. It works until I go to another page.
I tried adding
data-turbo-action="replace" in the
/app/get-random-number link but it had no effect.
What am I missing in the logic of the requests?
Any help appreciated, thank you.