Estoy tratando de usar el ejemplo de Hacer clic para editar con HTMX, usando una tabla.
Cada fila ( <tr> ) es un registro de base de datos que se ve así:
<tr hx-target="this" hx-swap="outerHTML"> <form> <td><input type="text" name="name" value="{{row.name}}"></td> <td><input type="text" name="email" value="{{row.email}}"></td> <td> <button class="btn" hx-put="/edit/{{row.id}}">Update<buttun> <button class="btn" hx-get="/view/{{row.id}}">Cancel</button> </td> </form> </tr> Desafortunadamente, cuando imprimo el cuerpo de la solicitud con request.form.keys en mi servidor de flask , veo que la solicitud está vacía ( [] )
Parece que el clic del botón no activó el envío del formulario con todos los campos de entrada.
¿Cómo puedo hacer que el clic del botón active el envío del formulario con todos los campos completados?
¿Puede publicar cómo se ve la solicitud desde la consola de Chrome o Firefox?
Esto parece correcto, en general.
Ah, acabo de recordar: estás trabajando con tablas aquí. Desafortunadamente, las tablas son muy exigentes con los elementos dentro de ellas, y apuesto a que la forma no funciona donde la colocas. Si inspecciona el DOM, apuesto a que encontrará que realmente no hay un elemento de formulario allí, por lo que htmx no lo encuentra para incluir las entradas.
Deberá volver a trabajar esto para incluir los valores de una manera diferente, por ejemplo, usando hx-include .
Algo como esto:
<tr hx-target="this" hx-swap="outerHTML"> <td><input type="text" name="name" value="{{row.name}}"></td> <td><input type="text" name="email" value="{{row.email}}"></td> <td> <button class="btn" hx-put="/edit/{{row.id}}" hx-include="closest tr"> Update <button> <button class="btn" hx-get="/view/{{row.id}}">Cancel</button> </td> </tr>Si está dispuesto a cambiar de filas de tabla a divs, el código original que tenía debería funcionar bien.
Esta es una situación desafortunada donde las mesas no son muy flexibles.
actualización : @guettli me recordó que puede incluir cualquier elemento e incluirá todas las entradas debajo de él, por lo que puede usar el closest tr en su atributo hx-include . ¡Gracias!