HTMX 4 (alpha5) - error: TypeError: Argument 1 ('node') to Node.appendChild must be an instance of Node #3599
Description
The problem: I try to swap out main, but it is not swapped out.
Template: selecting main from response and swapping out main
<main layout:fragment="content">
<wa-card id="warehouseFormCard" class="wa-stack wa-gap-m">
<div slot="header" class="wa-split wa-gap-s wa-align-items-center">
<h5 th:text="#{warehouse.form.edit.title}"></h5>
<div class="wa-cluster wa-gap-s">
<wa-button form="warehouseForm"
type="submit"
size="small"
variant="success"
th:text="#{warehouse.update.button}"></wa-button>
</div>
</div>
<form id="warehouseForm"
method="post"
class="wa-stack wa-gap-m"
th:hx-put="@{/warehouse/{id}(id=${warehouse.id})}"
hx-target="main"
hx-select="main"
hx-swap="outerHTML"
hx-status:4xx="target:#r-callout"
hx-status:5xx="target:#r-callout">
<div class="wa-stack wa-gap-xs">
<wa-input name="name"
th:value="${warehouse.name}"
autofocus
required
th:label="#{warehouse.name}"
th:placeholder="#{warehouse.name.placeholder}"></wa-input>
</div>
</form>
</wa-card>
</main>
Controller: Simply returns the whole listings page
@PutMapping("/{id}")
fun updateWarehouse(
@PathVariable id: Long,
@Valid @ModelAttribute form: WarehouseReq,
model: Model
): String {
warehouseSvc.updateWarehouse(id, form.name)
return warehouses(model, null)
}
[Log] htmx ctx (base-3aa41b3917c3a7cdbdc309b8613d013b.js, line 11)
Object
confirm: undefined
fetch: function()
hx: {}
isSSE: false
push: undefined
replace: undefined
request: {validate: true, action: "/warehouse/71", anchor: undefined, method: "PUT", headers: Object, …}
requestTimeout: 6
response: {raw: Response, status: 200, headers: Headers}
select: "main"
selectOOB: undefined
sourceElement: <form id="warehouseForm">
sourceEvent: SubmitEvent {isTrusted: true, submitter: <button>, type: "submit", target: <form id="warehouseForm">, currentTarget: null, …}
status: "error: TypeError: Argument 1 ('node') to Node.appendChild must be an instance of Node"
swap: "outerHTML"
target: <main id="main-content">
text: "<!DOCTYPE html>↵<html lang=\"en\" dir=\"ltr\" class=\"wa-theme-matter wa-palette-mild wa-brand-purple\">↵<head>↵ <meta charset=\"UTF-8\">↵ …"
title: "FAMME AS - Warehouses - Reai"
transition: false
Object Prototype