Using <a> links to fire turbo_stream requests

Links
1

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:

<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?

2

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

image
image1298×138 14.1 KB

3

@tleish exactly that:

image
image923×105 3.06 KB

4

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.

5

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

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

6

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

7

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.

8

Does the form fire as a fetch request?

9

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

10

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.

11

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!