HTMX и GO, не могут отправлять данные с помощью запроса GET из таблицы HTML
Я пытаюсь отправить некоторые данные с помощью запроса GET из HTML-таблицы. Просто вот так:
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>
}
Но на сервере я не вижу параметра, который следует отправить вместе с hx-get. Я также пробовал несколько способов hx-get = "/showExternalProfile/employeeNumber = {match.Name}, но в этом случае HTMX отправляется {match.Name} как строковое значение.
На сервере (GO) я сейчас использую этот тестовый код:
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)
}
Например, match.Name содержит значение «Макс Мустерманн». Который правильно загружается в HTML-таблицу. Если я жестко запрограммирую hx-get = "/showExternalProfile?employeeNumber=123", это тоже работает.
В документации HTMX я вижу множество примеров, которые делают то же самое. Но это просто не работает. Что мне не хватает?
Ответы 1
Поскольку здесь вы работаете с таблицами. К сожалению, таблицы очень требовательны к элементам внутри них. И текущая реализация hx-include="[employeeNumber='employeeNumber']" неверна, поскольку селектор внутри hx-include неточен. Вам необходимо обратиться к правильному селектору для скрытого поля ввода.
Вы можете изменить свой код, чтобы использовать hx-include с более точным селектором.
<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>
идти сервер:
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)}
я надеюсь, что это сработает !!
Однако это не объясняет, почему это работает. Почему селектор «ближайший tr» может быть решением? Stack Overflow предназначен для решений, которые принесут пользу и другим людям. Этот ответ в том виде, в котором он написан, в значительной степени предназначен просто для того, чтобы решить чью-то проблему.
это видео сражается через htmx и golang youtube.com/watch?v=uiXVDbRCj5Q