Hello,
I’m using Turbo Frames (7.1) to implement a simple system for modals in my application. I have a top level frame as a modal container and am using anchors to make frame requests to populate that container with whatever modal needs to be displayed.
The markup for a link is written like this:
<a data-turbo-frame="modal-container" href="/modal/list-details?encoded-list-id=MveKwZe0">
[list details]
</a>
The markup for the container itself looks like this:
<turbo-frame id="modal-container"></turbo-frame>
I also have a function for dismissing a modal that’s written to clear out the innerHTML of the frame:
function dismissModal(modalName) {
elemBySelector("turbo-frame#modal-container").innerHTML = "";
}
My question is this. When I click on the link to display the modal, the modal navigation is added to this history in a way I don’t want. How do I avoid this?
What this looks like in use is as follows:
- I’m on page
- I click on a modal link, and correctly display that modal
- I dismiss the modal and navigate to a different page.
- At this point, clicking “back” will get me to the previous page… but it will include the modal I dismissed.
My goal is to avoid having the modal click in the history, so that when I click back, I just get the page without the modal.
I’ve tried a handful of approaches, including using JavaScript to update the src attribute of the turbo frame… all to no avail.
I’d appreciate suggestions on the right way to do this sort of thing within Turbo.
Thanks,
Mike