HTMX stelt je in staat om krachtige dynamische webtoepassingen te bouwen met alleen eenvoudige HTML-attributen. In dit deel bekijken we de geavanceerde functies van HTMX en breiden we de mogelijkheden van HTMX uit met praktische voorbeelden zoals hx-trigger, gebeurtenistriggers en dynamische dataverwerking.

Geavanceerde functies van HTMX-integratie met Django

In het laatste deel, deel 6, zullen we ons concentreren op de kennis over het verwerken van reacties tussen server en client en de perfecte dynamische webontwikkelingsproces met HTMX en Django afsluiten.

1. Introductie tot de geavanceerde functies van HTMX

De geavanceerde functies van HTMX maken dynamische dataverwerking flexibeler en krachtiger. Hieronder staan de belangrijkste functies die in dit artikel aan bod komen:

  • hx-trigger: Stel een specifieke gebeurtenis in als trigger om een aanvraag te verzenden.
  • hx-params: Pas de gegevens aan die tijdens een aanvraag worden verzonden.
  • hx-swap: Stel de manier in waarop serverantwoordgegevens in de DOM worden ingevoegd.
  • Voorwaardelijke triggering: Flexibel omgaan met acties op basis van voorwaarden.

2. hx-trigger: Gebeurtenis gebaseerde aanvragen

hx-trigger stelt je in staat om een specifieke gebeurtenis in te stellen als trigger om serveraanvragen te verzenden. Standaard wordt de klikgebeurtenis (click) gebruikt, maar dit kan vrij worden aangepast.

Basisgebruik Voorbeeld

<input hx-get="/search/" hx-trigger="keyup changed delay:500ms" hx-target="#results" placeholder="Voer zoekterm in">
<div id="results">Zoekresultaten worden hier weergegeven.</div>

Belangrijke punten

  • keyup: Stuur een aanvraag bij elke toetsaanslag.
  • changed: Alleen aanvragen verzenden wanneer de invoerwaarde is gewijzigd.
  • delay: Vertraag het verzenden van de aanvraag met 500 ms.
  • hx-target: Specificeer het element waarin serverantwoordgegevens worden ingevoegd.

3. hx-params: Controle over verzonden gegevens

hx-params stelt je in staat om de gegevens die naar de server worden verzonden aan te passen.

  • Specifieke gegevens kunnen worden uitgesloten of alleen de benodigde gegevens kunnen worden verzonden.

Voorbeeld: Alleen specifieke velden verzenden

<form hx-post="/submit/" hx-params="username,email" hx-target="#result">
    <input type="text" name="username" placeholder="Gebruikersnaam">
    <input type="email" name="email" placeholder="E-mail">
    <input type="password" name="password" placeholder="Wachtwoord">
    <button type="submit">Verzenden</button>
</form>
<div id="result">Resultaten worden hier weergegeven.</div>

In de bovenstaande code worden alleen de velden username en email naar de server verzonden, terwijl password wordt uitgesloten.

4. hx-swap: Controle over de manier van invoegen van antwoordgegevens

hx-swap stelt je in staat om de manier in te stellen waarop de serverontvangen antwoordgegevens in de DOM worden ingevoegd. De standaardinstelling is innerHTML, waarbij de bestaande inhoud wordt vervangen.

Belangrijke opties

  • innerHTML: Standaardinstelling. Vervang de bestaande inhoud.
  • beforebegin: Invoegen vóór het element.
  • afterbegin: Invoegen aan het begin van het element.
  • beforeend: Invoegen aan het einde van het element.
  • afterend: Invoegen na het element.

Gebruik Voorbeeld

<div id="content">
    <p>Bestaande inhoud</p>
</div>
<button hx-get="/new-content/" hx-swap="beforeend" hx-target="#content">Inhoud toevoegen</button>

Bij klikken worden de ontvangen antwoordgegevens van /new-content/ aan het einde van de inhoud in <div id="content"> ingevoegd.

5. Voorwaardelijke triggering

HTMX kan aanvragen voorwaardelijk triggeren. Hierdoor kan je de gebruikersinterface en interactie nog gedetailleerder beheersen.

Voorbeeld: Aanvraag op basis van checkbox-selectie

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

De aanvraag wordt alleen verzonden naar /confirm/ wanneer de checkbox is geselecteerd.

6. Praktijk: Dynamische filtering implementeren met HTMX

HTML-code

<select hx-get="/filter/" hx-trigger="change" hx-target="#results">
    <option value="all">Alle</option>
    <option value="category1">Categorie 1</option>
    <option value="category2">Categorie 2</option>
</select>
<div id="results">Filterresultaten worden hier weergegeven.</div>

Django Weergave

from django.http import JsonResponse

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

Afsluiten met deze aflevering

In deze aflevering hebben we geleerd hoe we de geavanceerde functies van HTMX kunnen gebruiken om de integratie met Django verder uit te breiden.

De volgende aflevering is de laatste aflevering, waarin we kennis over de verwerking van reacties tussen server en client zullen behandelen, met praktische ontwikkeltips en optimalisatieoplossingen. Blijf op de hoogte! 😊