# How to use Turbo.visit() and target a specific frame?

**URL:** <https://discuss.hotwired.dev/t/how-to-use-turbo-visit-and-target-a-specific-frame/2441>\
**Category:** General\
**Created:** [March 4, 2021, 6:38pm UTC](https://discuss.hotwired.dev/t/how-to-use-turbo-visit-and-target-a-specific-frame/2441 "2021-03-04T18:38:37Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![foliosus](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/foliosus/32/1721_2.png) [@foliosus](https://discuss.hotwired.dev/u/foliosus)\
**Post date:** [March 4, 2021, 6:38pm UTC](https://discuss.hotwired.dev/t/how-to-use-turbo-visit-and-target-a-specific-frame/2441/1 "2021-03-04T18:38:37Z")

</div>

I’m trying to solve a problem where I’ve got a UI card, which is just a div, and I want the user to be able to click anywhere on the card and have a modal open up.

My modals are wired up as a turbo-frame. I’ve got the code to a point where, anywhere in my app, I can have a [link](https://discuss.hotwired.dev/some/destination) open in the modal.

The challenge is, because the users are clicking on a card, they’re not clicking on a link! So I need to write a small Stimulus controller to catch the click, and do the right thing. Here’s what I’ve got so far:

```
import ApplicationController from './application_controller'
import { Turbo } from '@hotwired/turbo-rails'

export default class extends ApplicationController {

  openModal (event) {
    const destination = this.element.dataset.href
    const clickedElement = event.target
    
    // Treat clicks to links as normal clicks, but other clicks should open the modal
    if(clickedElement.localName != 'a' && clickedElement.parentElement.localName != 'a') {
      event.preventDefault()
      event.stopPropagation()
      Turbo.visit(destination)
    }
  }
}

```

In my markup, I’ve got the card like this:

```
<div class="card" data-controller="card-controller" data-action="click->card-controller#openModal" data-href="/card/destination">
  <!-- a bunch of junk in here, including some links -->
</div>

```

I’ve verified that, when the card is clicked, the `openModal()` is correctly called, and that `openModal()` is differentiating between normal links and other clicks correctly.

Here’s my trouble. I need that controller’s `Turbo.visit()` call to target the `modal` frame. Is there any way to do that? I’d rather not have a hidden secret link if I can… it seems like this should be possible without a hidden link, but I can’t see a way to make it happen.

Thanks for the help!

---

<div class="post-metadata">

**Author:** ![javan](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/javan/32/594_2.png) [@javan](https://discuss.hotwired.dev/u/javan)\
**Post date:** [March 8, 2021, 8:33pm UTC](https://discuss.hotwired.dev/t/how-to-use-turbo-visit-and-target-a-specific-frame/2441/2 "2021-03-08T20:33:01Z")

</div>

You can navigate a `<turbo-frame>` by setting its `src` attribute. The change would like something like this (if you make your frame a target):

```diff
- Turbo.visit(destination)
+ this.frameTarget.src = destination

```

---

<div class="post-metadata">

**Author:** ![foliosus](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/foliosus/32/1721_2.png) [@foliosus](https://discuss.hotwired.dev/u/foliosus)\
**Post date:** [March 18, 2021, 5:47pm UTC](https://discuss.hotwired.dev/t/how-to-use-turbo-visit-and-target-a-specific-frame/2441/3 "2021-03-18T17:47:23Z")

</div>

I thought that would work, but when I set the `src`, the new content doesn’t load. I’ve verified through console output that the `src` is set correctly. Any suggestions?

---

<div class="post-metadata">

**Author:** ![yanshiyason](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/yanshiyason/32/2361_2.png) [@yanshiyason](https://discuss.hotwired.dev/u/yanshiyason)\
**Post date:** [November 17, 2021, 7:37am UTC](https://discuss.hotwired.dev/t/how-to-use-turbo-visit-and-target-a-specific-frame/2441/4 "2021-11-17T07:37:50Z")

</div>

Make sure to call reload after setting the source.

> let frame = querySelector(‘turbo-frame#your-frame’)  
> frame.src = ‘/my/new/path’  
> frame.reload()

> **[Turbo Reference](https://turbo.hotwired.dev/reference/frames#functions)**
>
> A reference of everything you can do with Turbo Frames.

---

<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:** [November 17, 2021, 3:45pm UTC](https://discuss.hotwired.dev/t/how-to-use-turbo-visit-and-target-a-specific-frame/2441/5 "2021-11-17T15:45:01Z")

</div>

> [@yanshiyason](#):
>
> let frame = querySelector(‘turbo-frame#your-frame’)  
> frame.src = ‘/my/new/path’  
> frame.reload()

Correct me if I’m wrong, but I believe you only need to `reload` this if the src value is the same.

```javascript
let frame = querySelector(‘turbo-frame#your-frame’)
frame.src = ‘/my/new/path’

```

or

```javascript
let frame = querySelector(‘turbo-frame#your-frame’)
frame.src = ‘/my/new/path’ // => loads turbo frame
...
frame.src = ‘/my/new/path’ // same as previous src, doesn't change anything
frame.reload() // => refresh/reload turbo-frame with updated src

```