¿Por qué format.turbo_stream hace que la página se desplace hacia arriba?

Tengo una tabla que forma un horario muy complejo. Cada tr tiene un id dom único. A medida que se renderiza el horario, la duración de un intervalo de tiempo del horario dicta un atributo colspan. Por ejemplo, un intervalo de tiempo de horario de 9 días tendrá colspan de 9 tds y se verá como una sección. Eso es demasiada información, en realidad.

Cada td con colspan tiene un menú desplegable simple que ofrece algunas opciones rápidas como editar y eliminar. Toda la tabla está envuelta en una etiqueta turboframe, por lo que todos los enlaces (sin turboframe: ‘top’) responderán al formato turbostream. El enlace de eliminación es un botón para….para disparar la respuesta de turbo_stream en la acción de eliminación.

La funcionalidad de todo esto realmente funciona perfectamente. Si un usuario hace clic en el menú desplegable de un bloque de horario determinado, hace clic en el enlace de eliminar…se alcanza la acción :destroy, se destruye el registro y la acción responde a turbo_stream…que reemplaza toda la fila de la tabla.

El problema es…por alguna razón, el contenido no se actualiza justo delante de mis ojos. En su lugar, la página vuelve al principio (sin refrescar la página) y si vuelvo a desplazarme hacia abajo a donde estaba…el contenido ha sido actualizado a través de TURBO. Recuerdo haber tenido problemas como este en JavaScript antiguo, pero ¿por qué turbo_stream también lo hace? Y, ¿hay algo que pueda hacer para evitarlo?

Usar div’s dentro de una tabla como esta no viola ningún estándar, pero no puedo evitar pensar que sería mejor convertir esta

, etc. Me pregunto si hacer eso también ayudaría con el problema anterior. No estoy seguro de por qué lo haría, pero manipular tablas parece hacer cosas extrañas a veces.

¡Gracias!

“`
respond_to do |format|
“`

“`ruby
format.turbo_stream {
render turbo_stream: turbo_stream.replace(
"user_#{ user_id }_crew_schedule_row",
partial: 'crew_schedules/partials/schedule_row',
locals: { user: @crew_schedule.user }
)
}

format.html { redirect_to redirect_path }

end
“`

davy.ai

July 29, 2023 at 2:49 am

Solución para actualizar el contenido mediante Turbo_stream

Si te enfrentas al problema de que el contenido no se actualiza en tiempo real al utilizar Turbo_stream para eliminar un registro, puedes probar la siguiente solución:

En primer lugar, puedes incluir el atributo data-turbo-permanent en el elemento que deseas conservar permanentemente en la página, de modo que Turbo_stream no lo elimine durante una actualización. Por ejemplo, puedes incluir este atributo en el elemento que envuelve la tabla.

En segundo lugar, puedes añadir la función scrollIntoView() en la respuesta de Turbo_stream, la cual hará que se desplace hacia abajo hasta el elemento actualizado en la página. Esta función se ejecutará después de que el contenido se haya actualizado mediante Turbo_stream, de modo que el usuario pueda ver los cambios en tiempo real sin tener que volver al principio de la página.

Por ejemplo, puedes modificar tu respuesta actual de la siguiente manera:

respond_to do |format|

  format.turbo_stream {
    render turbo_stream: [
      turbo_stream.replace(
        "user_#{ user_id }_crew_schedule_row",
        partial: 'crew_schedules/partials/schedule_row',
        locals: { user: @crew_schedule.user }
      ),
      turbo_stream.after(
        "user_#{ user_id }_crew_schedule_row",
        :js => "document.getElementById('user_#{ user_id }_crew_schedule_row').scrollIntoView({ behavior: 'smooth' })"
      )
    ]
  }

  format.html { redirect_to redirect_path }

end

Esta respuesta actualizada reemplazará la fila de la tabla mediante Turbo_stream y luego ejecutará la función scrollIntoView() para desplazarse hacia abajo hasta el elemento actualizado.

Uso de divs en lugar de tablas

En cuanto a la segunda parte de tu pregunta, si estás considerando utilizar divs en lugar de tablas, puedes intentar construir un diseño basado en cuadrícula utilizando CSS grid o flexbox.

CSS grid es un sistema de diseño potente que te permite crear cuadrículas complejas con diferentes tamaños de columna y fila. Puedes definir la plantilla de la cuadrícula, el espacio entre las celdas y las áreas de la cuadrícula, y luego colocar los elementos secundarios dentro de las áreas de la cuadrícula.

Flexbox es otro sistema de diseño que te permite crear diseños flexibles con una sola dimensión, ya sea fila o columna. Puedes definir el elemento contenedor como un contenedor flexible y luego ajustar las propiedades flexibles de los elementos secundarios, como el orden, el crecimiento flexible, la reducción flexible y la base flexible.

Utilizando uno de estos sistemas de diseño, puedes crear una estructura similar a una cuadrícula de divs para mostrar los datos de tu horario, y luego utilizar Turbo_stream para actualizar el contenido en tiempo real.

Answer

davy.ai

July 29, 2023 at 2:49 am
Solución para actualizar el contenido mediante Turbo_stream

Si te enfrentas al problema de que el contenido no se actualiza en tiempo real al utilizar Turbo_stream para eliminar un registro, puedes probar la siguiente solución:

En primer lugar, puedes incluir el atributo data-turbo-permanent en el elemento que deseas conservar permanentemente en la página, de modo que Turbo_stream no lo elimine durante una actualización. Por ejemplo, puedes incluir este atributo en el elemento que envuelve la tabla.

En segundo lugar, puedes añadir la función scrollIntoView() en la respuesta de Turbo_stream, la cual hará que se desplace hacia abajo hasta el elemento actualizado en la página. Esta función se ejecutará después de que el contenido se haya actualizado mediante Turbo_stream, de modo que el usuario pueda ver los cambios en tiempo real sin tener que volver al principio de la página.

Por ejemplo, puedes modificar tu respuesta actual de la siguiente manera:
```
respond_to do |format|

  format.turbo_stream {
    render turbo_stream: [
      turbo_stream.replace(
        "user_#{ user_id }_crew_schedule_row",
        partial: 'crew_schedules/partials/schedule_row',
        locals: { user: @crew_schedule.user }
      ),
      turbo_stream.after(
        "user_#{ user_id }_crew_schedule_row",
        :js => "document.getElementById('user_#{ user_id }_crew_schedule_row').scrollIntoView({ behavior: 'smooth' })"
      )
    ]
  }

  format.html { redirect_to redirect_path }

end
```
Esta respuesta actualizada reemplazará la fila de la tabla mediante Turbo_stream y luego ejecutará la función scrollIntoView() para desplazarse hacia abajo hasta el elemento actualizado.

Uso de divs en lugar de tablas

En cuanto a la segunda parte de tu pregunta, si estás considerando utilizar divs en lugar de tablas, puedes intentar construir un diseño basado en cuadrícula utilizando CSS grid o flexbox.

CSS grid es un sistema de diseño potente que te permite crear cuadrículas complejas con diferentes tamaños de columna y fila. Puedes definir la plantilla de la cuadrícula, el espacio entre las celdas y las áreas de la cuadrícula, y luego colocar los elementos secundarios dentro de las áreas de la cuadrícula.

Flexbox es otro sistema de diseño que te permite crear diseños flexibles con una sola dimensión, ya sea fila o columna. Puedes definir el elemento contenedor como un contenedor flexible y luego ajustar las propiedades flexibles de los elementos secundarios, como el orden, el crecimiento flexible, la reducción flexible y la base flexible.

Utilizando uno de estos sistemas de diseño, puedes crear una estructura similar a una cuadrícula de divs para mostrar los datos de tu horario, y luego utilizar Turbo_stream para actualizar el contenido en tiempo real.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

¿Por qué format.turbo_stream hace que la página se desplace hacia arriba?

Answer

davy.ai

Solución para actualizar el contenido mediante Turbo_stream

Uso de divs en lugar de tablas