How to get Turbo lazy load working?

1

I have /greeting and /messages HTML endpoints working.
They are built with Spring Boot/Thymeleaf.

My /messages endpoint returns:

<p>msgs</p>

My /greeting endpoint returns:

    <!DOCTYPE HTML>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>Getting Started: Serving Web Content</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="turbo-cache-control" content="no-cache">
        <script src="https://cdn.skypack.dev/pin/@hotwired/turbo@v7.0.0-beta.5-LhgiwOUjafYu3bb8VbTv/mode=imports/optimized/@hotwired/turbo.js" />
    </head>
    <body>
    <p th:text="'Hello, ' + ${name} + '!'" />
    <turbo-frame id="messages" src="/messages">
        <p>This message will be replaced by the response from /messages.</p>
    </turbo-frame>
    </body>
    </html>

when i use chrome to http://localhost:8080/greeting, I get a blank page.
Using developer tools, I see a call to greeting and a call to turbo.js, followed by nothing.
I expect a call to messages, followed by the display of the filled-in page.

What do I need to do to my greeting page to get this to run?

Thank you

2

Is this the entire response? Because you’ll need to wrap it up in a <turbo-frame> with an id matching what you have on /greeting. That’d look like this:

<turbo-frame id="messages">
  <p>msgs</p>
</turbo-frame>
3

OK, I got further by changing my script tag in the head to:

but the replacement value for my turbo frame is not working.
Will reply again once i have it.

4

yeah, that worked.
Thanks!

5

For anyone reading this, I had to get the script part right as well as wrap both HTML chunks in turbo-frame tags.