Formation HTMX | Recevoir une Réponse AJAX
Injecter dans le DOM les templates HTML retournés par le serveur est un jeu d'enfant avec HTMX.
Avec HTMX, la transmission de données se fait exclusivement à travers des templates HTML, évitant ainsi toute manipulation de données côté client (variables, conditions, boucles…). Cette approche simplifie grandement l’intégration des données dans le DOM, offrant une flexibilité optimale.
Target : ciblage du DOM
Par défaut, le retour d’une requête AJAX est injecté dans le DOM à l’intérieur de l’élément portant l’attribut hx-<methode_http>.
Il est possible de définir une autre balise, comme « réceptacle » de l’injection avec l’attribut hx-target ayant pour valeur le sélecteur CSS de l’élément cible.
<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>
- Sans
hx-target, les résultats seraient injectés dans la balise<input> - Avec
hx-target, les résultats sont injectés dans la balise<div id="search-results"></div>
Par défaut, le contenu est injecté par hx-target dans l’élément indiqué (innerHTML). Si vous souhaitez avoir plus de flexibilité lors de son insertion, il faudra faire appel à l’attribut hx-swap.
Swapping : remplacement du DOM
Le swapping consiste à spécifier comment le contenu ciblée par hx-target dois être mis à jour.
| Nom | Description |
|---|---|
innerHTML | (défaut) Insère le contenu à l’intérieur de l’élément cible |
outerHTML | Remplace l’intégralité de l’élément cible |
beforebegin | Ajoute le contenu avant le parent de l’élément cible |
afterbegin | Ajoute le contenu avant le premier enfant de l’élément cible |
beforeend | Ajoute le contenu après le dernier enfant de l’élément cible |
afterend | Ajoute le contenu après le parent de l’élément cible |
delete | Supprime l’élément cible indépendamment de la réponse |
none | Aucune insertion dans le DOM |
L’exemple suivant illustre l’intérêt du swapping avec beforeend, permettant de mettre à jour une liste <ul> de manière à conserver les éléments <li> existants.
<form hx-post="/tasks" hx-target="#task-list" hx-swap="beforeend">
<input type="text" name="task">
<button type="submit">Ajouter</button>
</form>
<ul id="task-list">
<!-- Les tâches vont être ajoutées en tant que dernier enfant -->
</ul>
À chaque soumission du formulaire, une requête POST est envoyée sur /tasks, enregistrant une nouvelle tâche (en base de données par exemple), et l’insérant dans le DOM, en fin de liste.