HTMX and GO, can't send data with GET Request from HTML Table

Question

I'm trying to send some data with a GET Request from a HTML-Table. Simple like that:

templ ProjectMatchTable(matches []model.Match) {
    <table class="striped">
        <thead>
            <tr>
            <th scope="col"></th>
            <th scope="col">Name</th>
            <th scope="col">Match %</th>
            <th scope="col">Verfügbarkeit %</th>
            <th scope="col">Verfügbarkeit Engpass</th>
            </tr>
        </thead>
        <tbody>
            for _, match := range matches {
                <tr>
                <th scope="row">
                    <div>
                    <input name="employeeNumber" type="hidden" value={match.Name} />
                    <button hx-get="/showExternalProfile" hx-target="#externalProfile" hx-params="*" hx-include="[employeeNumber='employeeNumber']">Anzeigen</button>
                    </div>
                </th>
                <td>{ match.Name }</td>
                <td>{ strconv.Itoa(match.Score) } %</td>
                <td>{ strconv.Itoa(match.Availability) } %</td>
                <td>{ match.AvailabilityConcerns }</td>
                </tr>
            }
        </tbody>
    </table>
}

But on the Server I don't see any parameter, which should be send along with hx-get. I tried several ways, also hx-get="/showExternalProfile/employeeNumber={match.Name} but HTMX is senden {match.Name} as String Value it that case.

On the Server (GO) I'm just using this test code at the moment:

func showExternalProfile(w http.ResponseWriter, r *http.Request) {
    employeeNumber := r.URL.Query().Get("employeeNumber")
    fmt.Println(employeeNumber)
    templ.Handler(external_profile.ExternalProfile()).ServeHTTP(w, r)
}

The match.Name contains a value "Max Mustermann" for example. Which is correctly loaded into the HTML-Table. If I hardcode hx-get="/showExternalProfile?employeeNumber=123" this also works.

I see a lot of examples in HTMX Documentation which are doing exactly the same. But it's just not working. What do I miss?

Answer 1

Since, you are working with tables here. Unfortunately tables are super picky about the elements inside them. And current implementation of hx-include="[employeeNumber='employeeNumber']" is not correct because the selector inside hx-include is not accurate. You need to refer to the correct selector for the hidden input field.

You can modify your code to use hx-include with a more precise selector.

<tbody>
            {{ range .Matches }}
            <tr>
                <th scope="row">
                    <div>
                        <input name="employeeNumber" type="hidden" value="{{ .Name }}" />
                        <button hx-get="/showExternalProfile" hx-target="#externalProfile" hx-include="closest tr">Anzeigen</button>
                    </div>
                </th>
                <td>{{ .Name }}</td>
                <td>{{ .Score }} %</td>
                <td>{{ .Availability }} %</td>
                <td>{{ .AvailabilityConcerns }}</td>
            </tr>
            {{ end }}
        </tbody>

go server:

func showExternalProfile(w http.ResponseWriter, r *http.Request) {
employeeNumber := r.URL.Query().Get("employeeNumber")
fmt.Println(employeeNumber)
// Your templating handler here
templ.Handler(external_profile.ExternalProfile()).ServeHTTP(w, r)} 

i hope this would work !!