Navigate with JS

I want to tell the page to do the equivalent of triggering a click on a link with a data-turbo-frame attribute. I have a table that when you click the row it needs to trigger that inside a turbo-frame. I could have the clicking of the row click an actual link but that seems really dirty. Is there a simple way to do this with Turbo that isn’t documented.

2 Likes

Are you saying you want to use javascript to update a turbo-frame src?

@tleish exactly. But I don’t want to use like turbo streams. I want to have the same functionality as when you click a link with a data-turbo-frame attribute.

Yes you can do this by changing the src attribute on the frame with JS

lets say you have a turbo frame
<turbo-frame id="nav-box" src="/posts/content"></turbo-frame>
you can change the location by doing
document.querySelector("#nav-box").src = "/new-location"

1 Like

This is a good suggestion. Not sure why I didn’t think of this sooner. Would still be nice if Turbo had a built in method to do this though. Either way easy enough.

Would still be nice if Turbo had a built in method to do this

I’m curious what you might suggest for this.

@tleish maybe

Turbo.visit(location, { frame: frame })