HTMX

https://htmx.org/docs/

Install npm
npm install htmx.org@2.0.10

AJAX

hx-get : issues a GET request to the given URL

<button hx-get="/users">
    Laad gebruikers
</button>

Haal /users op.

hx-post : issues a POST request to the given URL

<button hx-post="/like">
    Like
</button>

Stuur gegevens naar /like.

hx-put : issues a POST request to the given URL

<button hx-put="/messages">
    Put To Messages
</button>

Wanneer een gebruiker op deze knop klikt, verstuur dan een PUT-verzoek naar de URL /messages en laad het antwoord in de knop.

hx-patch : issues a POST request to the given URL
hx-delete : issues a POST request to the given URL

Verzoeken activeren

Standaard worden AJAX-verzoeken geactiveerd door de "natuurlijke" gebeurtenis van een element:

• input, textarea en select worden geactiveerd bij de change gebeurtenis
• form wordt geactiveerd door de submit gebeurtenis
• Al het andere wordt door de click gebeurtenis in gang gezet.

Als je ander gedrag wil kan je hx-trigger gebruiken om aan te geven welke gebeurtenis het verzoek zal activeren.

<div hx-post="/mouse_entered" hx-trigger="mouseenter">
    [Here Mouse, Mouse!]
</div>

Hier wordt een bericht verzonden als je erover heen gaat met je muis.

Een trigger kan ook een aantal extra modifiers hebben die het gedrag ervan veranderen. Als je bijvoorbeeld wilt dat een verzoek slechts één keer plaatsvindt, kun je de oncevolgende modifier voor de trigger gebruiken:

<div hx-post="/mouse_entered" hx-trigger="mouseenter once">
    [Here Mouse, Mouse!]
</div>

Andere modifiers zijn:

• changed: Verstuur alleen een verzoek als de waarde van het element is gewijzigd.
• delay:<time interval> : Wacht de opgegeven tijd (bijv. 1s) voordat je het verzoek verstuurt. Als de gebeurtenis zich opnieuw voordoet, wordt de aftelling gereset.
• throttle:<time interval> : Wacht de opgegeven tijd (bijv. 1s) voordat het verzoek wordt verzonden. In tegenstelling delay tot wanneer een nieuwe gebeurtenis plaatsvindt voordat de tijdslimiet is bereikt, wordt die gebeurtenis genegeerd, waardoor het verzoek aan het einde van de tijdsperiode wordt geactiveerd.
• from:<CSS Selector> : Luister naar de gebeurtenis op een ander element. Dit kan bijvoorbeeld gebruikt worden voor sneltoetsen. Houd er rekening mee dat deze CSS-selector niet opnieuw wordt geëvalueerd als de pagina verandert.

Voorbeeld

<input type="text" name="q"
    hx-get="/trigger_delay"
    hx-trigger="keyup changed delay:500ms"
    hx-target="#search-results"
    placeholder="Search...">
<div id="search-results"></div>

Deze invoer zal 500 milliseconden na een toetsaanslag een verzoek versturen als de invoer is gewijzigd en de resultaten invoegen in het veld div met de opgegeven id search-results.

In het attribuut hx-trigger kunnen meerdere triggers worden opgegeven , gescheiden door komma's.

Je kan ook triggerfilters toepassen door vierkante haken achter de gebeurtenisnaam te plaatsen, waartussen een JavaScript-expressie wordt geplaatst die wordt geëvalueerd. Als de expressie waar is true, wordt de gebeurtenis geactiveerd; anders niet.

<div hx-get="/clicked" hx-trigger="click[ctrlKey]">
    Control Click Me
</div>

Wordt alleen geactiveerd bij een Control-klik op het element.

speciale gebeurtenissen:

• load: wordt eenmaal geactiveerd wanneer het element voor het eerst wordt geladen
• revealed: wordt eenmaal geactiveerd wanneer een element voor het eerst in het zichtbare gedeelte van het scherm verschijnt.
• intersect: wordt eenmaal geactiveerd wanneer een element voor het eerst het zichtbare gedeelte van het scherm raakt. Dit ondersteunt twee extra opties:
  • root:<selector>: een CSS-selector van het hoofdelement voor intersectie
  • threshold:<float>: een drijvende-komma getal tussen 0,0 en 1,0, dat aangeeft bij welke mate van overlapping de gebeurtenis moet worden geactiveerd.

Als je wilt dat een element de opgegeven URL controleert in plaats van te wachten op een gebeurtenis, kun je de every volgende syntax gebruiken met het hx-trigger attribuut:

<div hx-get="/news" hx-trigger="every 2s"></div>

Elke 2 seconden wordt een GET-verzoek naar /news verzonden en het antwoord in de div geladen.

load trigger met een vertraging specificeert en zichzelf vervangt door het antwoord:

<div hx-get="/messages"
    hx-trigger="load delay:1s"
    hx-swap="outerHTML">
</div>

Als het /messageseindpunt steeds een op deze manier opgemaakte div retourneert, zal het elke seconde de URL blijven "opvragen".

Load polling kan nuttig zijn in situaties waarin een polling een eindpunt heeft, bijvoorbeeld wanneer je een voortgangsbalk aan de gebruiker toont.

Indicatoren

Wanneer een AJAX-verzoek wordt verzonden, is het vaak handig om de gebruiker te laten weten dat er iets gebeurt, aangezien de browser geen feedback geeft. Dit kun je in HTMLX bereiken door gebruik te maken van htmx-indicator een class.

De htmx-indicator klasse is zo gedefinieerd dat de transparantie van elk element met deze class standaard 0 is, waardoor het onzichtbaar maar wel aanwezig is in de DOM.

Hij zorgt ervoor dat die de transparantie van 1 krijgt.

<button hx-get="/click">
    Click Me!
    <img class="htmx-indicator" src="/spinner.gif" alt="Loading...">
</button>

Als je wilt dat het antwoord in een ander element wordt geladen dan het element dat het verzoek heeft gedaan, kun je het hx-target attribuut gebruiken, dat een CSS-selector accepteert.

<input type="text" name="q"
    hx-get="/trigger_delay"
    hx-trigger="keyup delay:500ms changed"
    hx-target="#search-results"
    placeholder="Search...">
<div id="search-results"></div>

Uitgebreide CSS-selectors

hx-target en de meeste attributen die een CSS-selector accepteren, ondersteunen een "uitgebreide" CSS-syntaxis:

• this: Je kunt het trefwoord gebruiken , dat aangeeft dat het element waarop het hx-target attribuut zich bevindt, het doel is.

• De closest <CSS selector>: syntax zoekt het dichtstbijzijnde voorouderelement of het element zelf dat overeenkomt met de opgegeven CSS-selector. (bijvoorbeeld: hiermee closest tr wordt de dichtstbijzijnde tabelrij ten opzichte van het element geselecteerd)

• Deze next <CSS selector>: syntax zoekt het volgende element in de DOM dat overeenkomt met de opgegeven CSS-selector.

• De previous <CSS selector>: syntax zoekt het vorige element in de DOM dat overeenkomt met de opgegeven CSS-selector.

• find <CSS selector>: Hiermee wordt het eerste onderliggende element gevonden dat overeenkomt met de opgegeven CSS-selector. (Bijvoorbeeld: hiermee find tr wordt de eerste onderliggende rij van het element geselecteerd.)

htmx biedt verschillende manieren om de geretourneerde HTML in de DOM te vervangen. Standaard vervangt de inhoud de innerHTMLvan het doelelement. Je kunt dit aanpassen door het attribuut hx-swap te gebruiken met een van de volgende waarden:

• innerHTML: Standaard wordt de inhoud in het doelelement geplaatst.
• outerHTML: vervangt het volledige doelelement door de geretourneerde inhoud
• afterbegin: plaatst de inhoud vóór het eerste kindelement binnen het doel.
• beforebegin: plaatst de inhoud vóór het doel in het ouderelement van het doel.
• beforeend: Voegt de inhoud toe na het laatste kindelement binnen het doel.
• afterend: Voegt de inhoud toe na het doel in het ouderelement van het doel.
• delete: verwijdert het doelelement ongeacht het antwoord
• none: Voegt geen inhoud uit het antwoord toe ( Out of Band Swaps en antwoordheaders worden nog steeds verwerkt).

Het hx-swap attribuut biedt veel opties om het verwisselgedrag van htmx aan te passen. Standaard vervangt htmx bijvoorbeeld de titel van een titel-tag die ergens in de nieuwe inhoud wordt gevonden. Je kunt dit gedrag uitschakelen door de ignoreTitle modifier op true in te stellen.

<button hx-post="/like" hx-swap="outerHTML ignoreTitle:true">Like</button>

De volgende modifiers hx-swap zijn beschikbaar:

• transition: true of false, of de view transition API voor deze omwisseling gebruikt moet worden.
• swap: De wisseltijd die moet worden gebruikt (bijv. 100ms) tussen het moment dat de oude inhoud wordt gewist en de nieuwe inhoud wordt ingevoegd.
• settle : De instel vertraging die moet worden gebruikt (bijv. 100ms) tussen het moment dat nieuwe inhoud wordt ingevoegd en het moment dat deze is ingesteld.
• ignoreTitle: Indien ingesteld op true, wordt elke titel die in de nieuwe inhoud wordt gevonden genegeerd en wordt de document titel niet bijgewerkt.
• scroll: top of bottom, zal het doelelement naar boven of naar beneden scrollen.
• show: top of bottom, zal de boven- of onderkant van het doelelement in beeld scrollen.

Vaak wil je de verzoeken van twee elementen coördineren. Je wilt bijvoorbeeld dat een verzoek van het ene element voorrang krijgt op een verzoek van een ander element, of dat het wacht totdat het verzoek van het andere element is afgerond. htmx biedt een hx-sync attribuut waarmee je dit kunt bereiken.

<form hx-post="/store">
    <input id="title" name="title" type="text"
        hx-post="/validate"
        hx-trigger="change"
        hx-sync="closest form:abort">
    <button type="submit">Submit</button>
</form>

Door de invoer te controleren hx-sync="closest form:abort, worden verzoeken op het formulier in de gaten gehouden en wordt het verzoek van de invoer afgebroken als er een formulierverzoek aanwezig is of start terwijl het invoerverzoek nog loopt.

Vaak wilt u een actie bevestigen voordat u een verzoek indient. htmx ondersteunt het hx-confirm attribuut waarmee u een actie kunt bevestigen met behulp van een eenvoudig JavaScript-dialoogvenster:

<button hx-delete="/account" hx-confirm="Are you sure you wish to delete your account?">
    Delete My Account
</button>