After form submission page is add at the end of the current on, due to order of accept headers #1335

benjamin-dreux · 2024-11-09T13:02:39Z

Start from an app that works with form submission (post/redirect/get), adding Turbo. I expect my form to be handeled by turbo which should call fetch and produce it's magic.

In my case, the content responded to the GET, is appended to the current page.
Even if the response is a complete page (html, head, body).

After clicking my ofrm submitting button here is my result

The responded html page seems very normal

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>
			IFSR
		</title>
		<link rel="stylesheet" href="/webjars/bulma/css/bulma.css">
		<link rel="stylesheet" href="/webjars/fortawesome__fontawesome-free/6.6.0/css/all.css">
		<script type="importmap">
			    {
        "imports": {
            "turbo": "/webjars/hotwired__turbo/8.0.10/dist/turbo.es2017-esm.js"
        }
    }

		</script>
		<script type="module">
			
    import * as Turbo from "turbo";
    Turbo.start()



		</script>
	</head>
	<body>
		<div class="container">
			<nav class="navbar navbar-default" role="navigation">
				<div class="navbar-header">
					<a class="navbar-brand" href="/">
						<span>
						</span>
					</a>
				</div>
				<div class="navbar-menu">
					<div class="navbar-start">
						<a class="navbar-item" href="/persons">
							Contacts
						</a>
						<a class="navbar-item" href="/file">
							Files
						</a>
					</div>
				</div>
			</nav>
			<div class="container-fluid">
				<div class="container xd-container">
					<form method="post" id="person" action="/persons/0/update">
						<input type="hidden" name="id" value="0">
						<div class="columns is-centered">
							<div class="column is-narrow">
								<button class="button is-success" form="person" formaction="/persons/0/edit/addAddress">
								<span class="icon is-small">
										<i class="fas fa-circle-plus">
										</i>
									</span>
									<span>
										Add Address
									</span>
								</button>
							</div>
						</div>
					</form>
					<br>
					<br>
				</div>
			</div>
		</div>
	</body>
</html>

Something that i've noticed is that the content type is not html as I would assume

Without turbo, my content type of the response is html.

After testing it turns out that turbo send request with the following headers

Accept
	text/vnd.turbo-stream.html, text/html, application/xhtml+xml

Then my backend (java/spring ) pick seams to pick the first text/vnd.turbo-stream.html as a response type. Which trigger the wrong behavior in response to that.

Then I can work my way with my backend.

Is this order of accept headers required when treating with real usage of stream ? Is it possible (without breaking contracts) to change this order ??

The text was updated successfully, but these errors were encountered:

4lllex · 2024-12-09T04:39:44Z

Even if you change the order of content types, you'd have the same problem the other way around for turbo stream responses being sent as html. You should explicitly set the content type that you're sending in a response:

https://stackoverflow.com/questions/6182362/sending-custom-content-type-with-responseentityresource

benjamin-dreux · 2024-12-09T11:45:24Z

True, but the vast majority of pages for an hot wired app will be html page not streams.
Or at least I think so

4lllex · 2024-12-09T15:04:37Z

You can try this:

document.addEventListener("turbo:submit-start", function (event){
  event.detail.formSubmission.fetchRequest.headers["Accept"] = "text/html, application/xhtml+xml, text/vnd.turbo-stream.html"
})

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

After form submission page is add at the end of the current on, due to order of accept headers #1335

After form submission page is add at the end of the current on, due to order of accept headers #1335

benjamin-dreux commented Nov 9, 2024

4lllex commented Dec 9, 2024

benjamin-dreux commented Dec 9, 2024

4lllex commented Dec 9, 2024

After form submission page is add at the end of the current on, due to order of accept headers #1335

After form submission page is add at the end of the current on, due to order of accept headers #1335

Comments

benjamin-dreux commented Nov 9, 2024

4lllex commented Dec 9, 2024

benjamin-dreux commented Dec 9, 2024

4lllex commented Dec 9, 2024