# htmx Riferimento Rapido

*Attributi, trigger, swap, eventi, estensioni*

> Source: htmx Documentation (htmx.org) · MIT

## Basi

### Installazione

```
<script src="https://unpkg.com/htmx.org@2"></script>

<!-- Or via npm -->
npm install htmx.org
```

### Come Funziona

| Command | Description |
|---------|-------------|
| `HTML-driven` | AJAX tramite attributi HTML, senza JS |
| `Swap contenuto` | Il server restituisce frammenti HTML che htmx sostituisce |
| `Progressivo` | Migliora l'HTML standard; degrada con grazia |
| `REST-friendly` | Funziona con qualsiasi framework server-side |

## Attributi

### Attributi Richiesta Principali

| Command | Description |
|---------|-------------|
| `hx-get="/url"` | Invia richiesta GET all'URL |
| `hx-post="/url"` | Invia richiesta POST all'URL |
| `hx-put="/url"` | Invia richiesta PUT all'URL |
| `hx-patch="/url"` | Invia richiesta PATCH all'URL |
| `hx-delete="/url"` | Invia richiesta DELETE all'URL |

### Attributi di Comportamento

| Command | Description |
|---------|-------------|
| `hx-trigger` | Evento che scatena la richiesta |
| `hx-target` | Elemento in cui sostituire il contenuto |
| `hx-swap` | Come sostituire il contenuto della risposta |
| `hx-select` | Seleziona un sottoinsieme dell'HTML della risposta |
| `hx-vals` | Aggiunge valori extra alla richiesta |
| `hx-confirm` | Mostra dialogo di conferma prima della richiesta |
| `hx-disable` | Disabilita l'elaborazione htmx sull'elemento |

## Trigger

### Sintassi dei Trigger

```
<!-- Default: natural event (click for buttons) -->
<button hx-get="/data">Load</button>

<!-- Custom trigger event -->
<div hx-get="/news" hx-trigger="every 5s">Feed</div>

<!-- Multiple triggers -->
<input hx-get="/search" hx-trigger="keyup changed delay:300ms" />
```

### Modificatori dei Trigger

| Command | Description |
|---------|-------------|
| `changed` | Attiva solo se il valore è cambiato |
| `delay:Ns` | Attende N secondi prima di attivare |
| `throttle:Nms` | Limita a una volta ogni N ms |
| `once` | Attiva solo la prima volta |
| `from:selector` | Ascolta su un elemento diverso |
| `every Ns` | Polling ogni N secondi |
| `load` | Attiva al caricamento dell'elemento |
| `revealed` | Attiva quando l'elemento scorre nella vista |

## Target

### Selezione del Target

```
<!-- Target another element -->
<button hx-get="/data" hx-target="#result">Load</button>
<div id="result"></div>

<!-- Target closest ancestor -->
<button hx-get="/row" hx-target="closest tr">Update</button>

<!-- Target with CSS selector -->
<button hx-get="/info" hx-target="next .output">Go</button>
```

### Parole Chiave Target

| Command | Description |
|---------|-------------|
| `this` | L'elemento stesso (default) |
| `closest <sel>` | Antenato più vicino corrispondente al selettore |
| `find <sel>` | Primo discendente corrispondente al selettore |
| `next <sel>` | Fratello successivo corrispondente al selettore |
| `previous <sel>` | Fratello precedente corrispondente al selettore |

## Swapping

### Strategie di Swap

| Command | Description |
|---------|-------------|
| `innerHTML` | Sostituisce il contenuto interno (default) |
| `outerHTML` | Sostituisce l'intero elemento target |
| `afterbegin` | Prepende dentro il target |
| `beforeend` | Appende dentro il target |
| `beforebegin` | Inserisce prima del target |
| `afterend` | Inserisce dopo il target |
| `delete` | Rimuove l'elemento target |
| `none` | Nessuno swap, solo eventi |

### Modificatori di Swap

```
<!-- Swap with transition delay -->
<div hx-get="/data" hx-swap="innerHTML swap:300ms">

<!-- Settle delay for CSS transitions -->
<div hx-get="/data" hx-swap="innerHTML settle:500ms">

<!-- Scroll to top after swap -->
<div hx-get="/page" hx-swap="innerHTML scroll:top">
```

## Header

### Header di Richiesta (inviati da htmx)

| Command | Description |
|---------|-------------|
| `HX-Request` | Sempre "true" per le richieste htmx |
| `HX-Target` | ID dell'elemento target |
| `HX-Trigger` | ID dell'elemento che ha scatenato |
| `HX-Trigger-Name` | Nome dell'elemento che ha scatenato |
| `HX-Current-URL` | URL corrente del browser |
| `HX-Prompt` | Risposta utente da hx-prompt |

### Header di Risposta (inviati dal server)

| Command | Description |
|---------|-------------|
| `HX-Redirect` | Reindirizzamento client-side all'URL |
| `HX-Refresh` | Ricarica completa della pagina se "true" |
| `HX-Retarget` | Sovrascrive hx-target con selettore CSS |
| `HX-Reswap` | Sovrascrive la strategia hx-swap |
| `HX-Trigger` | Scatena eventi client-side |
| `HX-Push-Url` | Inserisce URL nella cronologia del browser |

## Eventi

### Eventi del Ciclo di Vita

| Command | Description |
|---------|-------------|
| `htmx:configRequest` | Prima della richiesta; modifica params/header |
| `htmx:beforeRequest` | Appena prima della chiamata AJAX |
| `htmx:afterRequest` | Dopo il completamento della richiesta |
| `htmx:beforeSwap` | Prima che il contenuto venga sostituito |
| `htmx:afterSwap` | Dopo che il contenuto è stato sostituito |
| `htmx:afterSettle` | Dopo che il DOM si è stabilizzato |
| `htmx:responseError` | Il server ha restituito uno stato di errore |

### Ascolto degli Eventi

```
document.body.addEventListener("htmx:afterSwap", (e) => {
  console.log("Swapped:", e.detail.target);
});

// Cancel a request
document.body.addEventListener("htmx:configRequest", (e) => {
  if (!confirm("Proceed?")) e.preventDefault();
});
```

## Estensioni

### Uso delle Estensioni

```
<script src="https://unpkg.com/htmx-ext-json-enc"></script>

<div hx-ext="json-enc">
  <form hx-post="/api/data">
    <input name="title" />
    <button>Submit as JSON</button>
  </form>
</div>
```

### Estensioni Popolari

| Command | Description |
|---------|-------------|
| `json-enc` | Codifica il corpo della richiesta come JSON |
| `loading-states` | Gestisce classi CSS dello stato di caricamento |
| `head-support` | Unisce i tag <head> dalle risposte |
| `preload` | Precarica link al mousedown/hover |
| `sse` | Supporto Server-Sent Events |
| `ws` | Supporto WebSocket |
| `response-targets` | Target diversi per risposte di errore |

## Indicatori

### Indicatore di Caricamento

```
<button hx-get="/slow" hx-indicator="#spinner">
  Load Data
</button>
<span id="spinner" class="htmx-indicator">Loading...</span>
```

### CSS Indicatore

```
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline; }
.htmx-request.htmx-indicator { display: inline; }
```

*htmx aggiunge la classe htmx-request all'elemento durante le richieste*

### Disabilita Durante la Richiesta

```
<button hx-post="/submit" hx-disabled-elt="this">
  Submit
</button>
```

*hx-disabled-elt aggiunge l'attributo disabled durante la richiesta*

## Pattern Comuni

### Ricerca Attiva

```
<input type="search" name="q"
  hx-get="/search"
  hx-trigger="keyup changed delay:300ms"
  hx-target="#results" />
<div id="results"></div>
```

### Scroll Infinito

```
<tr hx-get="/rows?page=2"
    hx-trigger="revealed"
    hx-swap="afterend">
  <td>Loading more...</td>
</tr>
```

### Elimina con Conferma

```
<button hx-delete="/item/42"
        hx-confirm="Delete this item?"
        hx-target="closest .item"
        hx-swap="outerHTML">
  Delete
</button>
```

### Modifica Inline

```
<div hx-get="/edit/1" hx-trigger="click"
     hx-swap="outerHTML">
  Click to edit this text
</div>
```