Swapping in elements in a table with HTMX

Question

I've been trying to use HTMX to append a new row to the table I'm displaying. Im using a hx-swap-oob attribute so I can redraw the form and swap inside the table the new row. The problem is that I'm getting everything inserted where the form is, so the form is correct, but the new row appears, without label below the form.

Here is the HTML code:

Main template:

{{ define "allUsers" }}

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

{{ end }}

Form:

{{ define "form" }}

    
        Name: 
        Email: 
        Password: 
        {{ if .Errors }}
        {{ .Errors.msg }}
        {{end}}
    
    

{{ end }}

Contacts:

{{ define "contacts" }}

    
        Users
    
    
        
                {{ range .Contacts }}
                {{ template "contact" . }}
                {{ end }}
            
            
                
                    ID
                    Name
                    Age
                    Email
                     - 
                
            
            
        
    

{{ end }}

This is what im trying to render with the htmx-swap-oob:

{{ define "contact" }}

    {{ .ID }}
    {{ .Name }} 
    {{ .Age }} 
    {{ .Email }}
    
        
        
    

{{ end }}

And here Im sending the data from the backend once the form is being submited:

{{ define "form-and-oob" }}
{{ template "form" .Form }}

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

{{ end }}

And here is my handler written in go, using echo:

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


", 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)
}

I tried to use a direct target to the but I still get the same results. Also just sending the contact, without the form to be redrawn, but the new row still is being drawn under the form. I just cannot find the way to target the correct thing, it just does not move from the area below the form!

EDIT: I also have this script added to the body, I do not thing is where the problem is, but I put it because maybe that "htmx:load" does something that I am not expecting.

        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;
                }
            });
        });

And here I have the generated HTML before the Post request:

And after, i did not put the inside of the #display, but it is untouched:


     6a9cdee7-e719-11ef-9452-5811223c9280
    asd
    42069 qweasdasd

Dauros · Accepted Answer

As the documentation of hx-swap-oob explains, when you use a swap strategy other than outerHTML, the encapsulating tag pair will be striped. Therefore you need to embed the row element inside a real table.

{{ define "form-and-oob" }}
{{ template "form" .Form }}

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

{{ end }}

Swapping in elements in a table with HTMX

Answers (1)

Related Questions