Hotwire Turbo does not replace turbo-frame

1.3k Views Asked by KingOfCoders At 20 October 2024 at 08:42

I have a form

<turbo-frame id="goals">
    <form action="/add_goal">
        <label for="goal_name">Goal Name</label>
        <input type="text" id="goal_name" name="goal_name" placeholder="Goal name..">
        <input type="submit" value="Add Goal">
    </form>
</turbo-frame>

that I want to replace.

As a reply I send 303 and "Location: /added_goal" and "/added_goal" returns

<html>
<body>
<turbo-frame id="goals">
    OK!
</turbo-frame>
</body>
</html>

Turbo sets the src on turbo-frame but does not replace the content.

Original Q&A

There are 1 best solutions below

aidan On 22 May 2022 at 04:52

Your server's response might not be correctly formatted. Given your HTML, frontend Turbo will expect something like the following:

<turbo-stream action="replace" target="goals">
  <template>
    <div>
      This div will replace the existing element with the DOM ID "goals".
    </div>
  </template>
</turbo-stream>

See Turbo docs, the code snippet is adapted from there.

It's unclear if you also have this issue, but you should make sure that your server is responding with Content Type text/vnd.turbo-stream. If the content type header isn't correct it doesn't matter if the HTML is formatted correctly.

Hotwire Turbo does not replace turbo-frame

There are 1 best solutions below

Related Questions in TURBOLINKS

Related Questions in HOTWIRE-RAILS

Related Questions in TURBO-FRAMES

Trending Questions

Popular # Hahtags

Popular Questions