Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
benjamin-dreux opened this issue Nov 9, 2024 · 0 comments
Open

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

benjamin-dreux opened this issue Nov 9, 2024 · 0 comments

Comments

@benjamin-dreux
Copy link

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).

image

After clicking my ofrm submitting button here is my result

image

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

image

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 ??
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@benjamin-dreux