es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

La solicitud GET se procesa como HTML en lugar de TURBO_STREAM desde dentro de la etiqueta turbo_frame_tag.

Estoy empezando a trabajar con hotwire/turbo y he configurado todo correctamente.
Los turbo streams funcionan correctamente.

Dentro de index.html.erb:

<h1>Tareas</h1>
<%= turbo_stream_from "tasks" %>

<div id="tasks">
  <% @tasks.each do |task| %>
    <%= render task %>
  <% end %>
</div>

Dentro de _task.html.erb:

<%= turbo_frame_tag dom_id(task) do %>
  <%= link_to 'Editar', edit_task_path(task) %>
  <%= link_to 'Eliminar', task, method: :delete, data: { confirm: '¿Estás seguro?' } %>
  <hr>
<% end %>

Cuando se presiona el botón de eliminación, como se esperaba, la consola de Rails muestra:

Started DELETE "/tasks/41" for ::1 at 2021-12-14 18:40:32 +0000
Processing by TasksController#destroy as TURBO_STREAM

Pero cuando se presiona el botón de edición, la consola de Rails muestra:

Started GET "/tasks/41/edit" for ::1 at 2021-12-14 18:41:29 +0000
Processing by TasksController#edit as HTML

Esto significa que la página carga una nueva página, mostrando edit.html.erb en lugar de simplemente actualizar el contenido dentro de la etiqueta turbo-frame.

Cuando se inspecciona el DOM, tanto los enlaces de edición como los de eliminación se encuentran dentro de un turbo-frame:

<turbo-frame id="task_41">
  <a href="/tasks/41/edit">Editar</a>
  <a data-confirm="¿Estás seguro?" rel="nofollow" data-method="delete" href="/tasks/41">Eliminar</a>
  <hr>
</turbo-frame>

Entonces mi pregunta es, ¿por qué la solicitud se procesa como HTML y no como TURBO_STREAM?

edit.html.erb se ve así:

<h1>Editar Tarea</h1>
<%= turbo_frame_tag dom_id(@task) do %>
    <%= render 'form', task: @task %>
<% end %>
<%= link_to 'Mostrar', @task %> |
<%= link_to 'Atrás', tasks_path %>

¡Muchas gracias!

Tags:  , ,

Answer

  1. Avatar for davy.ai

    Según el código proporcionado, parece que el botón de edición es simplemente un enlace regular a la página de edición, sin utilizar ningún método o ayudante relacionado con Turbo. Para cargar la página de edición dentro del marco de Turbo, deberías utilizar la etiqueta turbo-frame-link en lugar de la etiqueta link_to regular. Se vería algo así:

    <%= turbo_frame_tag dom_id(task) do %>
      <%= turbo_frame_link_to 'Editar', edit_task_path(task) %>
      <%= link_to 'Eliminar', task, method: :delete, data: { confirm: '¿Estás seguro?' } %>
      <hr>
    <% end %>
    

    El ayudante turbo_frame_link_to interceptará el clic en el enlace y cargará la página de edición dentro del marco de Turbo utilizando turbo streams, en lugar de cargar una nueva página HTML.

Comments are closed.