es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Enviar combinación de dos valores de entrada con htmx.

13 Jul, 2023 Programación

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.

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, es posible lograr esto utilizando htmx. Puedes adjuntar un atributo hx-trigger al elemento select para disparar la solicitud hx-get para ordenar cada vez que su valor cambie, y un atributo hx-trigger al elemento button para disparar la solicitud hx-get cada vez que se hace clic en él. También puedes usar el atributo hx-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:

    <div class="col-auto">
  <div class="input-group input-group-sm">
    <select id="np-sort-key" name="key" class="form-select" hx-post="/articles">
      <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" hx-get="/articles" hx-swap="table" hx-swap-oob="true" hx-trigger="click">
      <span class="bi bi-sort-down"></span> <!-- bi-sort-up para icono Ascendente -->
    </button>
  </div>
</div>
<table hx-target="this" hx-trigger="load">
<!-- contenido de la tabla -->
</table>

    En este ejemplo, adjuntamos el atributo hx-post al elemento select para especificar la URL a la cual los datos del formulario deben ser enviados. Adjuntamos el atributo hx-get al elemento button para especificar la URL a la cual se debe enviar la solicitud GET, y usamos el atributo hx-swap para especificar el elemento que debe ser reemplazado con la respuesta del servidor. También adjuntamos el atributo hx-trigger tanto al elemento select como al elemento button para activar sus respectivas acciones. Finalmente, usamos el atributo hx-target para especificar el elemento que debe ser actualizado con la respuesta del servidor al cargar la página.

Comments are closed.