# Using \<a\> links to fire turbo\_stream requests

**URL:** <https://discuss.hotwired.dev/t/using-a-links-to-fire-turbo-stream-requests/4336>\
**Category:** Links\
**Created:** [July 26, 2022, 4:49am UTC](https://discuss.hotwired.dev/t/using-a-links-to-fire-turbo-stream-requests/4336 "2022-07-26T04:49:43Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![drewbot](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/drewbot/32/2657_2.png) [@drewbot](https://discuss.hotwired.dev/u/drewbot)\
**Post date:** [July 26, 2022, 4:49am UTC](https://discuss.hotwired.dev/t/using-a-links-to-fire-turbo-stream-requests/4336/1 "2022-07-26T04:49:43Z")

</div>

I cannot seem to get predictable behavior for this…I keep banging my head up against `<a>` links firing as HTML, not as turbo\_stream requests. I’ve tried using `link_to` tags, setting the method as `:get`, and including a specific `target` to point to the enclosing `turbo_frame`.

Here is an example of my computed source:

```auto
<turbo-frame id="step_session_23743">
  <a href="/list_sessions/1458/step_sessions/23743/select" class="flex border p-2 my-2">
    <p class="group-hover:text-blue-600">My Link.</p>
  </a>
</turbo-frame>

```

No matter what I do, this link sends an HTML request. Help? Thoughts?

---

<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:** [July 26, 2022, 5:52am UTC](https://discuss.hotwired.dev/t/using-a-links-to-fire-turbo-stream-requests/4336/2 "2022-07-26T05:52:24Z")

</div>

If you open the browser developer console and enter `Turbo`, do you see see something like?

 ![image](https://canada1.discourse-cdn.com/flex027/uploads/stimulusjs/original/2X/b/bc624e6ad9c043de817bce3d6bf52fe261088e2c.png)

---

<div class="post-metadata">

**Author:** ![drewbot](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/drewbot/32/2657_2.png) [@drewbot](https://discuss.hotwired.dev/u/drewbot)\
**Post date:** [July 26, 2022, 3:20pm UTC](https://discuss.hotwired.dev/t/using-a-links-to-fire-turbo-stream-requests/4336/3 "2022-07-26T15:20:34Z")

</div>

@tleish exactly that:

 ![image](https://canada1.discourse-cdn.com/flex027/uploads/stimulusjs/original/2X/b/b8c7b21bd51a5701af4244754e539a05f2b96c3d.png)

---

<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:** [July 26, 2022, 3:25pm UTC](https://discuss.hotwired.dev/t/using-a-links-to-fire-turbo-stream-requests/4336/4 "2022-07-26T15:25:07Z")

</div>

Hm, that is puzzling. I wonder if something else is disabling turbo somewhere else on the page (e.g. `data-turbo="false"`). If more of the code was shared (e.g. github or public/live) it would help to troubleshoot.

---

<div class="post-metadata">

**Author:** ![drewbot](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/drewbot/32/2657_2.png) [@drewbot](https://discuss.hotwired.dev/u/drewbot)\
**Post date:** [July 26, 2022, 3:36pm UTC](https://discuss.hotwired.dev/t/using-a-links-to-fire-turbo-stream-requests/4336/5 "2022-07-26T15:36:35Z")

</div>

Here’s some more context that illustrates why I’m so confused…

```auto
<turbo-frame id="step_session_25328">
  <div class="scroll-mt flex flex-wrap border-[2px] border-blue-200 px-5 py-4 p my-4 items-center group shadow-lg" data-controller="step-sessions--active-step">
    <!-- Body -->
    <div class="w-full items-start mt-4 mb-6">
      <p class="">All this works.</p>
    </div>
    <!-- Actions -->
    <div class="block w-full my-2 space-y-2">
      <div class="flex w-full">
        <form class="" method="post" action="/list_sessions/1554/step_sessions/25328/complete"><button class="w-full h-14" type="submit">Complete</button><input type="hidden" name="authenticity_token" value="HbIwc-be0U67KItv-KsLE9IxlTjJA_9xDDOTZv-X_f4aOohWlvjowCX-QrZrD3sxykAKhm96q-AsSHnUXvDAvw" autocomplete="off"></form>
      </div>
      <div class="flex w-full space-x-2">
        <form class="" method="post" action="/list_sessions/1554/step_sessions/25328/abandon"><button class="w-full h-14" type="submit">Skip Step</button><input type="hidden" name="authenticity_token" value="HbIwc-be0U67KItv-KsLE9IxlTjJA_9xDDOTZv-X_f4aOohWlvjowCX-QrZrD3sxykAKhm96q-AsSHnUXvDAvw" autocomplete="off"></form>
        <form data-turbo="false" class="" method="get" action="/list_sessions/1554/pause"><button class="w-full h-14" type="submit">Pause List</button></form>
      </div>
    </div>
</div>
</turbo-frame>
<turbo-frame id="step_session_25329">
  <a href="/list_sessions/1554/step_sessions/25329/select" class="">
  <!-- Icon -->
  <div class="flex-none w-6 ml-1">
    <div class="border-[2px] border-slate-200 h-4 w-4 rounded">
      <!-- A square -->
    </div>
  </div>
  <!-- Details -->
  <div class="flex-1">  
    <p class="group-hover:text-blue-600">This doesn't work.</p>
  </div>
  </a>
</turbo-frame>

```

In the first `turbo-frame` the `post` forms fires as a `turbo-stream` request. All good.

Also good: the `form` that fires with a `get` sends a `html` request as `data-turbo` is set to `false`.

No clue why the `a` tags are failing.

---

<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:** [July 26, 2022, 4:07pm UTC](https://discuss.hotwired.dev/t/using-a-links-to-fire-turbo-stream-requests/4336/6 "2022-07-26T16:07:19Z")

</div>

Out of curiosity, if you remove `data-turbo="false"`, do links work as expected?

---

<div class="post-metadata">

**Author:** ![drewbot](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/drewbot/32/2657_2.png) [@drewbot](https://discuss.hotwired.dev/u/drewbot)\
**Post date:** [July 26, 2022, 4:55pm UTC](https://discuss.hotwired.dev/t/using-a-links-to-fire-turbo-stream-requests/4336/7 "2022-07-26T16:55:53Z")

</div>

Let’s check…

Without `data-turbo='false'` the get form fires as an HTML request. But since the reply doesn’t match the turbo-frame (this route redirects to root), the turbo-frame is removed from the dom.

---

<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:** [July 26, 2022, 10:15pm UTC](https://discuss.hotwired.dev/t/using-a-links-to-fire-turbo-stream-requests/4336/8 "2022-07-26T22:15:24Z")

</div>

Does the form fire as a fetch request?

---

<div class="post-metadata">

**Author:** ![drewbot](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/drewbot/32/2657_2.png) [@drewbot](https://discuss.hotwired.dev/u/drewbot)\
**Post date:** [July 26, 2022, 10:19pm UTC](https://discuss.hotwired.dev/t/using-a-links-to-fire-turbo-stream-requests/4336/9 "2022-07-26T22:19:22Z")

</div>

I don’t know how to check for that. How would I?

---

<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:** [July 26, 2022, 11:04pm UTC](https://discuss.hotwired.dev/t/using-a-links-to-fire-turbo-stream-requests/4336/10 "2022-07-26T23:04:21Z")

</div>

In your browser, open the developer tools and click the network tab. You can usually see “All” request, or filter them by type (doc, image, css, js, fetch, etc). Standard web page requests are “doc”, turbo sends request using fetch. If clicking on the link request via doc, turbo is not handling the link click. If fetch, then turbo is handling the link, but you are dealing with other issues.

---

<div class="post-metadata">

**Author:** ![drewbot](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/drewbot/32/2657_2.png) [@drewbot](https://discuss.hotwired.dev/u/drewbot)\
**Post date:** [July 26, 2022, 11:18pm UTC](https://discuss.hotwired.dev/t/using-a-links-to-fire-turbo-stream-requests/4336/11 "2022-07-26T23:18:23Z")

</div>

Thanks.

Crazy, it is a ‘fetch’ and the initiator is the `turbo` js instance. And yet the request that lands in the controller is processed as HTTP!