Estoy escribiendo un sitio web simple con Django y decidí probar la biblioteca htmx en el lado del cliente para cargar fragmentos html. Ahora quiero ordenar las 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>Publish date</option> <option value="title">Title</option> </select> <button class="btn btn-outline-dark" type="button"> <span class="bi bi-sort-down"></span> <!-- bi-sort-up for Asc icon --> </button> </div> </div> Quiero agregar/reemplazar el parámetro de consulta order_by=<order><key> a/en la URL actual (por ejemplo, /articles?page=2&order_by=-publish_date.) y enviarlo de vuelta a la vista de Django tanto en el cambio de "selección" y haga clic en "botón". El punto final devuelve un Html. Quiero intercambiarlo con otro nodo Html con Htmx. (Tenga en cuenta que la clase de intervalo debe cambiarse al hacer clic en el botón para mostrar que la clasificación es Asc o Dsc)
¿Es posible usar htmx ? Si no, las soluciones simples de Javascript son bienvenidas.
Podrías resolverlo así:
Tu usas
<form hx-get="..."> ... <input type="hidden" name="order_by"> </form>Luego puede mostrarle al usuario un bonito icono para ordenar. Si el usuario hace clic en el ícono, actualiza la entrada oculta a través de JS.
El enfoque más sencillo sería construir el lado del servidor de URL en función de los valores de entrada y luego enviarlo mediante el encabezado de respuesta HX-Push :
Por lo que entendí de las documentaciones de htmx , htmx nos proporciona dos herramientas para enviar valores personalizados:
hx-vals que le permite agregar parámetros personalizados a la solicitud en curso. Estos parámetros tienen la forma de un objeto Json y sus valores pueden ser estáticos o dinámicos (devueltos desde una función JS). Por ejemplo: <div hx-get="/list" hx-vals='js:{"order_by": concatSortOrderAndKey()}'>hx-include que agrega valores de los elementos especificados por un selector de consultas a la solicitud en curso. En el caso de mi problema, además de la respuesta de @guettli, podría configurar los parámetros htmx en la etiqueta "seleccionar" y "botón" y usar hx-vals para calcular el nuevo valor order_by . (también al usar hx-boost , hx-* cosas podrían configurarse solo en elementos envolventes externos). Pero en general, creo que la entrada oculta fue una mejor solución.