How to regressively diminish a lazy-loaded turbo-frame?

1

Can a lazy-loaded turbo-frame be marked up to degrade to a standard HTML form?

With Javascript off, this markup renders nothing:

<turbo-frame id="new_message"
    src="/rooms/1/messages/new"
    target="_top"/>

while a non-lazy-loaded frame degrades just fine:

<turbo-frame id="room">
  <h1>Room first room 1234</h1>

  <p>
    <a href="/rooms/1/edit">Edit</a> <a href="/rooms"
      data-turbo-frame="_top">Back</a>
  </p>
</turbo-frame>

How can I render one markup if turbo was loaded successfully and javascript is enabled and another if not?

2

How about wrapping the form in a noscript tag?

1 Like