Turbo frame content not replaced

1

I’m trying to make the basic frame example from the handbook work, unfortunately without success so far. Probably some very obvious mistake on my side, but nothing I tried worked so far and I couldn’t find the solution in any existing discussion.

This is my initial page:

<html>
<head>
    <script type="module">
        import hotwiredTurbo from 'https://cdn.skypack.dev/@hotwired/turbo';
    </script>
    <title>Example</title>
</head>

<body>    
<h1>Index page</h1>

<turbo-frame id="message_1">
    <h1>My message title</h1>
    <p>My message content</p>
    <a href="/messages/edit/1">Edit this message</a>
</turbo-frame>

</body>
</html>

After clicking the link, Turbo is fetching the following content in the background, as expected:

<body>    

<h1>Editing message 1</h1>

<turbo-frame id="message_1">
    <form action="/messages/1">
        <input name="message[name]" type="text" value="My message title">
        <textarea name="message[name]">My message content</textarea>
        <input type="submit">
    </form>
</turbo-frame>

</body>

However, the initial page remains unchanged, the content is not replaced. The ID of the frame in the response matches the ID of the frame that contains the link. What am I missing?

2

Share also the backend code.

3

I use a simple Rust back end that serves the HTML above, here is a minimal example: https://github.com/kldtz/turbo-example. The way I understood the documentation, I don’t need to do anything special in the back end to make turbo-frames work (as opposed to turbo-streams), but maybe I’m wrong? Thanks for your help!

4

A form submission when successful is expected to redirect. If there is a form error then you need to return a status code 4xx or 5xx in the response. It looks like you’re just returning a 200.

5

Thanks for your response! I actually didn’t submit a form, but followed a link.

I found my (dumb) error after implementing the same minimal example with Rails and comparing the requests: I forgot to set the content type to text/html, now it works. Sorry for the unnecessary question.

1 Like