HTMX permite construir potentes aplicaciones web dinámicas con solo unos simples atributos HTML. En esta entrega, exploraremos las características avanzadas de HTMX, ampliando las posibilidades de HTMX a través de ejemplos prácticos como hx-trigger, activación de eventos y procesamiento dinámico de datos.

Características avanzadas de HTMX integradas con Django

Y en la última parte 6, nos centraremos en el conocimiento sobre el manejo de respuestas entre el servidor y el cliente, finalizando el proceso completo de desarrollo web dinámico utilizando HTMX y Django.

1. Introducción a las características avanzadas de HTMX

Las características avanzadas de HTMX hacen que el procesamiento de datos dinámicos sea más flexible y potente. A continuación, se presentan las principales funciones que trataremos en este artículo:

  • hx-trigger: Configura un evento específico como disparador para enviar una solicitud.
  • hx-params: Personaliza los datos que se enviarán con la solicitud.
  • hx-swap: Establece cómo se insertarán los datos de respuesta del servidor en el DOM.
  • Activación condicional: Procesa las acciones de forma flexible según condiciones.

2. hx-trigger: Solicitudes basadas en eventos

hx-trigger permite enviar solicitudes al servidor configurando un evento específico como disparador. Por defecto, se utiliza el evento de clic (click), pero se puede cambiar libremente.

Ejemplo básico de uso

<input hx-get="/search/" hx-trigger="keyup changed delay:500ms" hx-target="#results" placeholder="Ingresa término de búsqueda">
<div id="results">Los resultados de búsqueda aparecerán aquí.</div>

Puntos clave

  • keyup: Envía una solicitud cada vez que se introduce una tecla.
  • changed: Solo envía la solicitud cuando el valor cambia.
  • delay: Retrasa el envío de la solicitud 500ms.
  • hx-target: Especifica el elemento donde se insertarán los datos de respuesta del servidor.

3. hx-params: Control de los datos a enviar

hx-params permite personalizar los datos que se enviarán al servidor.

  • Se pueden excluir datos específicos o enviar solo los datos necesarios.

Ejemplo: enviar solo campos específicos

<form hx-post="/submit/" hx-params="username,email" hx-target="#result">
    <input type="text" name="username" placeholder="Nombre de usuario">
    <input type="email" name="email" placeholder="Correo electrónico">
    <input type="password" name="password" placeholder="Contraseña">
    <button type="submit">Enviar</button>
</form>
<div id="result">Los resultados aparecerán aquí.</div>

En el código anterior, solo se envían los campos username y email al servidor, excluyendo password.

4. hx-swap: Control del método de inserción de datos de respuesta

hx-swap establece cómo se insertarán los datos de respuesta recibidos del servidor en el DOM. El valor predeterminado es innerHTML, que reemplaza el contenido existente.

Opciones principales

  • innerHTML: Valor predeterminado. Reemplace el contenido existente.
  • beforebegin: Inserta antes del elemento.
  • afterbegin: Inserta al inicio dentro del elemento.
  • beforeend: Inserta al final dentro del elemento.
  • afterend: Inserta después del elemento.

Ejemplo de uso

<div id="content">
    <p>Contenido existente</p>
</div>
<button hx-get="/new-content/" hx-swap="beforeend" hx-target="#content">Agregar contenido</button>

Al hacer clic, los datos de respuesta recibidos desde /new-content/ se insertarán al final dentro de <div id="content">.

5. Activación condicional

HTMX puede activar solicitudes de forma condicional. Esto permite un control más detallado de la interacción con la interfaz de usuario.

Ejemplo: Solicitud según la selección de un checkbox

<input type="checkbox" id="confirm" hx-get="/confirm/" hx-target="#message" hx-trigger="change:checked">
<div id="message"></div>

Solo se envía una solicitud a /confirm/ si el checkbox está marcado.

6. Práctica: Implementación de filtrado dinámico con HTMX

Código HTML

<select hx-get="/filter/" hx-trigger="change" hx-target="#results">
    <option value="all">Todo</option>
    <option value="category1">Categoría 1</option>
    <option value="category2">Categoría 2</option>
</select>
<div id="results">Los resultados del filtro aparecerán aquí.</div>

Vista de Django

from django.http import JsonResponse

def filter_view(request):
    category = request.GET.get("category", "all")
    results = {
        "all": ["Elemento 1", "Elemento 2"],
        "category1": ["Elemento 1 Categoría 1", "Elemento 2 Categoría 1"],
        "category2": ["Elemento 1 Categoría 2", "Elemento 2 Categoría 2"],
    }
    return JsonResponse({"results": results.get(category, [])})

Conclusión de este episodio

En esta parte, aprendimos cómo expandir la integración de HTMX a través de características avanzadas, mejorando la conexión con Django.

La próxima entrega será la última parte, donde abordaremos conocimientos sobre el manejo de respuestas entre el servidor y el cliente, así como consejos prácticos de desarrollo y optimización. ¡Estén atentos! 😊