# Navigate with JS

**URL:** <https://discuss.hotwired.dev/t/navigate-with-js/3215>\
**Category:** General\
**Created:** [September 7, 2021, 3:26pm UTC](https://discuss.hotwired.dev/t/navigate-with-js/3215 "2021-09-07T15:26:36Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![jarrett](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/jarrett/32/2206_2.png) [@jarrett](https://discuss.hotwired.dev/u/jarrett)\
**Post date:** [September 7, 2021, 3:26pm UTC](https://discuss.hotwired.dev/t/navigate-with-js/3215/1 "2021-09-07T15:26:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![tleish](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/tleish/32/920_2.png) [@tleish](https://discuss.hotwired.dev/u/tleish)\
**Post date:** [September 7, 2021, 4:42pm UTC](https://discuss.hotwired.dev/t/navigate-with-js/3215/2 "2021-09-07T16:42:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jarrett](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/jarrett/32/2206_2.png) [@jarrett](https://discuss.hotwired.dev/u/jarrett)\
**Post date:** [September 7, 2021, 8:08pm UTC](https://discuss.hotwired.dev/t/navigate-with-js/3215/3 "2021-09-07T20:08:41Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![yunggindigo](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/yunggindigo/32/1271_2.png) [@yunggindigo](https://discuss.hotwired.dev/u/yunggindigo)\
**Post date:** [September 7, 2021, 8:10pm UTC](https://discuss.hotwired.dev/t/navigate-with-js/3215/4 "2021-09-07T20:10:40Z")

</div>

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"`

---

<div class="post-metadata">

**Author:** ![jarrett](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/jarrett/32/2206_2.png) [@jarrett](https://discuss.hotwired.dev/u/jarrett)\
**Post date:** [September 7, 2021, 9:43pm UTC](https://discuss.hotwired.dev/t/navigate-with-js/3215/5 "2021-09-07T21:43:19Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![tleish](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/tleish/32/920_2.png) [@tleish](https://discuss.hotwired.dev/u/tleish)\
**Post date:** [September 7, 2021, 10:19pm UTC](https://discuss.hotwired.dev/t/navigate-with-js/3215/6 "2021-09-07T22:19:23Z")

</div>

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

I’m curious what you might suggest for this.

---

<div class="post-metadata">

**Author:** ![jarrett](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/jarrett/32/2206_2.png) [@jarrett](https://discuss.hotwired.dev/u/jarrett)\
**Post date:** [September 8, 2021, 12:27pm UTC](https://discuss.hotwired.dev/t/navigate-with-js/3215/7 "2021-09-08T12:27:38Z")

</div>

@tleish maybe

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