In Elemente in einer Tabelle mit HTMX tauschen ⇐ HTML

[Guest]

Ich habe versucht, HTMX zu verwenden, um eine neue Zeile an der Tabelle anzuhängen, die ich anzeige. Ich verwende ein HX-Swap-OOB-Attribut, damit ich das Formular neu zeichnen und in die Tabelle in der neuen Zeile tauschen kann. Das Problem ist, dass ich alles einfügen lasse, wo sich das Formular befindet, also ist das Formular korrekt, aber die neue Zeile erscheint ohne -bezeichnungen unter dem Formular. < /P>
Hier ist die HTML -Code: < /p>
Hauptvorlage: < /p>

Code: Select all

{{ define "allUsers" }}

{{ template "form" .Form }}
{{ template "contacts" .Data }}

{{ end }}
< /code>
Formular: < /p>
{{ define "form" }}


Name: [i]
Email: 
Password: 
{{ if .Errors }}
{{ .Errors.msg }}
{{end}}

CreateUser

{{ end }}
< /code>
Kontakte: < /p>
{{ define "contacts" }}


Users




ID
Name
Age
Email
 - 



{{ range .Contacts }}
{{ template "contact" .  }}
{{ end }}




{{ end }}
< /code>
Dies ist es, was ich mit dem HTMX-SWAP-OOB rendern möchte: < /p>
{{ define "contact" }}

{{ .ID }}
[b]{{ .Name }}[/b] 
{{ .Age }} 
{{ .Email }}


[/i]


[i]                hx-target="#contact-{{ .ID }}">[/i]



{{ end }}
< /code>
Und hier sende ich die Daten aus dem Backend, sobald das Formular eingereicht wird: < /p>
{{ define "form-and-oob" }}
{{ template "form" .Form }}

{{ template "contact" .Data.Contact }}

{{ end }}
< /code>
Und hier ist mein Handler in Go mit Echo: < /p>
func (s *ServerBU) handlePost(c echo.Context) error {
name := c.FormValue("name")
email := c.FormValue("email")
password := c.FormValue("password")

if !s.EmailIndex.IsDuplicate(email) {
log.Printf("Email %s already in use\n\n\n", email)

form := NewForm()
form.Values["name"] = name
form.Values["email"] = email
form.Values["password"] = password
form.Errors["msg"] = "Email already registered."
return c.Render(422, "form", form)

}

id, newUser, err := NewUser(name, "default", email, password, 42069)
if err != nil {
form := NewForm()
form.Values["name"] = name
form.Values["email"] = email
form.Values["password"] = password
form.Errors["msg"] = "Some error. Please try again."
return c.Render(422, "form", form)
}

s.EmailIndex.Put(email, id.String())
s.Storage.Put(id.String(), *newUser)

p := NewPage(*NewForm(), Data{Contact: *newUser})

return c.Render(200, "form-and-oob", p)
}
< /code>
Ich habe versucht, ein direktes Ziel für die  zu verwenden, aber ich erhalte immer noch die gleichen Ergebnisse. Senden Sie auch nur den Kontakt, ohne dass das Formular neu gezeichnet wird, aber die neue Reihe wird immer noch unter das Formular gezogen. Ich kann einfach nicht den Weg finden, um das richtige Ding anzusprechen, sondern bewegt sich einfach nicht aus dem Bereich unterhalb des Formulars! Ich tue nicht, wo ist das Problem, aber ich setze es, weil vielleicht "Htmx: Load" etwas tut, das ich nicht erwarte.  < /P>
        document.addEventListener("htmx:load", function () {
document.addEventListener("htmx:beforeSwap", function (evt) {
if (evt.detail.xhr.status === 422) {
evt.detail.shouldSwap = true;
evt.detail.isError = false;
}
});
});

< /code>
Und hier habe ich das generierte HTML vor der Postanforderung: < /p>



Name:

Und danach habe ich nicht das Innere des #Displays eingefügt, aber es ist unberührt: < /p>

 6a9cdee7-e719-11ef-9452-5811223c9280
[b]asd[/b]
42069 qweasdasd