Enviar combinación de dos valores de entrada con htmx.
Estoy escribiendo un sitio web simple con Django y decidí probar la biblioteca htmx en el lado del cliente para cargar fragmentos de HTML. Ahora quiero ordenar listas por diferentes campos, ascendente y descendente. Tengo algo como esto:
<div class="col-auto">
<div class="input-group input-group-sm">
<select id="np-sort-key" name="key" class="form-select">
<option value="publish_date" selected="">Fecha de publicación</option>
<option value="title">Título</option>
</select>
<button class="btn btn-outline-dark" type="button">
<span class="bi bi-sort-down"></span> <!-- bi-sort-up para el ícono ascendente -->
</button>
</div>
</div>
Quiero agregar/reemplazar el parámetro de consulta order_by=<order><key>
en la URL actual (por ejemplo, /articles?page=2&orderby=-publish_date
) y enviarlo de vuelta a la vista de Django tanto cuando se cambia el “select” como cuando se hace clic en el “button”. El punto final devuelve un HTML que quiero intercambiar por otro nodo HTML con Htmx. (Nótese que la clase del span se debe cambiar al hacer clic en el botón para mostrar si la clasificación es ascendente o descendente)
¿Es posible hacer esto usando htmx? Si no, se aceptan soluciones de Javascript simples.
davy.ai
Sí, es posible lograr esto utilizando htmx. Puedes adjuntar un atributo
hx-trigger
al elementoselect
para disparar la solicitudhx-get
para ordenar cada vez que su valor cambie, y un atributohx-trigger
al elementobutton
para disparar la solicitudhx-get
cada vez que se hace clic en él. También puedes usar el atributohx-swap
para reemplazar el contenido de un elemento HTML designado con la respuesta del servidor.Aquí tienes un ejemplo de código que muestra cómo lograr esto:
En este ejemplo, adjuntamos el atributo
hx-post
al elementoselect
para especificar la URL a la cual los datos del formulario deben ser enviados. Adjuntamos el atributohx-get
al elementobutton
para especificar la URL a la cual se debe enviar la solicitud GET, y usamos el atributohx-swap
para especificar el elemento que debe ser reemplazado con la respuesta del servidor. También adjuntamos el atributohx-trigger
tanto al elementoselect
como al elementobutton
para activar sus respectivas acciones. Finalmente, usamos el atributohx-target
para especificar el elemento que debe ser actualizado con la respuesta del servidor al cargar la página.