{
"tool_response": [
{
"type": "text",
"text": "{\n \"success\": true,\n \"doc\": {\n \"id\": 146,\n \"parent_id\": 145,\n \"slug\": \"patterns\",\n \"path\": \"\/frontend\/htmx\/patterns\",\n \"title\": \"HTMX Patterns Referenz\",\n \"description\": \"Kopierbare HTMX-Patterns für häufige Use-Cases\",\n \"content\": \"<nav class=\\\"breadcrumb\\\">\\n <a href=\\\"\/docs\\\">Dokumentation<\/a> »\\n <a href=\\\"\/docs\/frontend\\\">Frontend<\/a> »\\n <a href=\\\"\/docs\/frontend\/htmx\\\">HTMX<\/a> »\\n Patterns\\n<\/nav>\\n\\n<h1>HTMX Patterns Referenz<\/h1>\\n<p class=\\\"doc-meta\\\"><strong>Erstellt:<\/strong> 2025-12-27 | <strong>Aktualisiert:<\/strong> 2025-12-27<\/p>\\n\\n\\n<p>Kopierbare Patterns für häufige Anwendungsfälle.<\/p>\\n\\n<h2>CRUD-Operationen<\/h2>\\n\\n<h3>Create (POST)<\/h3>\\n\\n<pre><code><form hx-post=\\\"\/api\/items\\\"\\n hx-headers='{\\\"X-CSRF-TOKEN\\\": \\\"<?= $csrfToken ?>\\\"}'\\n hx-target=\\\"#form-message\\\"\\n hx-swap=\\\"innerHTML\\\"\\n hx-indicator=\\\"#create-btn\\\"\\n hx-disabled-elt=\\\"#create-btn\\\">\\n \\n <input type=\\\"text\\\" name=\\\"title\\\" required>\\n <textarea name=\\\"description\\\"><\/textarea>\\n \\n <button type=\\\"submit\\\" id=\\\"create-btn\\\" class=\\\"btn btn--primary\\\">\\n <span class=\\\"htmx-content\\\">Erstellen<\/span>\\n <span class=\\\"htmx-indicator\\\">Erstelle...<\/span>\\n <\/button>\\n<\/form>\\n<div id=\\\"form-message\\\"><\/div><\/code><\/pre>\\n\\n<h3>Read (GET mit Partial)<\/h3>\\n\\n<pre><code><div hx-get=\\\"\/api\/items\/<?= $id ?>\/details\\\"\\n hx-trigger=\\\"revealed\\\"\\n hx-swap=\\\"innerHTML\\\">\\n Lade Details...\\n<\/div><\/code><\/pre>\\n\\n<h3>Update (PUT)<\/h3>\\n\\n<pre><code><form hx-put=\\\"\/api\/items\/<?= $id ?>\\\"\\n hx-headers='{\\\"X-CSRF-TOKEN\\\": \\\"<?= $csrfToken ?>\\\"}'\\n hx-target=\\\"#form-message\\\"\\n hx-swap=\\\"innerHTML\\\"\\n hx-indicator=\\\"#save-btn\\\"\\n hx-disabled-elt=\\\"#save-btn\\\">\\n \\n <input type=\\\"text\\\" name=\\\"title\\\" value=\\\"<?= htmlspecialchars($item['title']) ?>\\\">\\n \\n <button type=\\\"submit\\\" id=\\\"save-btn\\\" class=\\\"btn btn--primary\\\">\\n <span class=\\\"htmx-content\\\">Speichern<\/span>\\n <span class=\\\"htmx-indicator\\\">Speichere...<\/span>\\n <\/button>\\n<\/form>\\n<div id=\\\"form-message\\\"><\/div><\/code><\/pre>\\n\\n<h3>Delete (DELETE)<\/h3>\\n\\n<pre><code><button hx-delete=\\\"\/api\/items\/<?= $id ?>\\\"\\n hx-headers='{\\\"X-CSRF-TOKEN\\\": \\\"<?= $csrfToken ?>\\\"}'\\n hx-confirm=\\\"'<?= htmlspecialchars($item['title']) ?>' wirklich löschen?\\\"\\n hx-target=\\\"closest tr\\\"\\n hx-swap=\\\"outerHTML swap:0.3s\\\"\\n class=\\\"btn btn--danger\\\">\\n Löschen\\n<\/button><\/code><\/pre>\\n\\n<h2>Inline-Editing<\/h2>\\n\\n<h3>Text-Input mit Auto-Save<\/h3>\\n\\n<pre><code><input type=\\\"text\\\" \\n name=\\\"title\\\"\\n value=\\\"<?= htmlspecialchars($value) ?>\\\"\\n class=\\\"inline-edit\\\"\\n hx-post=\\\"\/api\/items\/<?= $id ?>\/title\\\"\\n hx-headers='{\\\"X-CSRF-TOKEN\\\": \\\"<?= $csrfToken ?>\\\"}'\\n hx-trigger=\\\"blur changed, keyup[key=='Enter'] changed\\\"\\n hx-swap=\\\"none\\\"\\n hx-disabled-elt=\\\"this\\\"\\n hx-on::after-request=\\\"this.classList.toggle('is-saved', event.detail.successful); setTimeout(() => this.classList.remove('is-saved'), 1000)\\\"><\/code><\/pre>\\n\\n<h3>Select mit Auto-Save<\/h3>\\n\\n<pre><code><select name=\\\"status\\\"\\n class=\\\"inline-select\\\"\\n hx-post=\\\"\/api\/items\/<?= $id ?>\/status\\\"\\n hx-headers='{\\\"X-CSRF-TOKEN\\\": \\\"<?= $csrfToken ?>\\\"}'\\n hx-swap=\\\"none\\\"\\n hx-disabled-elt=\\\"this\\\"\\n hx-on::after-request=\\\"this.classList.toggle('is-saved', event.detail.successful); setTimeout(() => this.classList.remove('is-saved'), 1000)\\\">\\n <?php foreach ($statuses as $key => $label): ?>\\n <option value=\\\"<?= $key ?>\\\" <?= $item['status'] === $key ? 'selected' : '' ?>>\\n <?= htmlspecialchars($label) ?>\\n <\/option>\\n <?php endforeach; ?>\\n<\/select><\/code><\/pre>\\n\\n<h3>Toggle (Checkbox)<\/h3>\\n\\n<pre><code><input type=\\\"checkbox\\\"\\n name=\\\"is_active\\\"\\n <?= $item['is_active'] ? 'checked' : '' ?>\\n hx-post=\\\"\/api\/items\/<?= $id ?>\/toggle-active\\\"\\n hx-headers='{\\\"X-CSRF-TOKEN\\\": \\\"<?= $csrfToken ?>\\\"}'\\n hx-swap=\\\"none\\\"\\n hx-disabled-elt=\\\"this\\\"><\/code><\/pre>\\n\\n<h2>Listen & Tabellen<\/h2>\\n\\n<h3>Lazy-Load Tabelle<\/h3>\\n\\n<pre><code><table>\\n <thead>...<\/thead>\\n <tbody hx-get=\\\"\/api\/items?page=1\\\"\\n hx-trigger=\\\"revealed\\\"\\n hx-swap=\\\"innerHTML\\\">\\n <tr><td colspan=\\\"5\\\">Lade Daten...<\/td><\/tr>\\n <\/tbody>\\n<\/table><\/code><\/pre>\\n\\n<h3>Infinite Scroll<\/h3>\\n\\n<pre><code><div id=\\\"items-list\\\">\\n <?php foreach ($items as $item): ?>\\n <div class=\\\"item\\\"><?= htmlspecialchars($item['title']) ?><\/div>\\n <?php endforeach; ?>\\n \\n <?php if ($hasMore): ?>\\n <div hx-get=\\\"\/api\/items?page=<?= $page + 1 ?>\\\"\\n hx-trigger=\\\"revealed\\\"\\n hx-swap=\\\"outerHTML\\\"\\n hx-indicator=\\\"#load-more-spinner\\\">\\n <span id=\\\"load-more-spinner\\\" class=\\\"htmx-indicator\\\">Lade mehr...<\/span>\\n <\/div>\\n <?php endif; ?>\\n<\/div><\/code><\/pre>\\n\\n<h3>Sortierbare Spalten<\/h3>\\n\\n<pre><code><th hx-get=\\\"\/api\/items?sort=title&dir=<?= $sortDir === 'asc' ? 'desc' : 'asc' ?>\\\"\\n hx-target=\\\"#items-tbody\\\"\\n hx-swap=\\\"innerHTML\\\"\\n class=\\\"sortable <?= $sortCol === 'title' ? 'sorted-' . $sortDir : '' ?>\\\">\\n Titel\\n<\/th><\/code><\/pre>\\n\\n<h2>Suche & Filter<\/h2>\\n\\n<h3>Live-Search<\/h3>\\n\\n<pre><code><input type=\\\"search\\\"\\n name=\\\"q\\\"\\n placeholder=\\\"Suchen...\\\"\\n hx-get=\\\"\/api\/items\/search\\\"\\n hx-trigger=\\\"input changed delay:300ms, search\\\"\\n hx-target=\\\"#search-results\\\"\\n hx-swap=\\\"innerHTML\\\"\\n hx-indicator=\\\"#search-spinner\\\">\\n<span id=\\\"search-spinner\\\" class=\\\"htmx-indicator\\\">...<\/span>\\n<div id=\\\"search-results\\\"><\/div><\/code><\/pre>\\n\\n<h3>Filter-Form<\/h3>\\n\\n<pre><code><form hx-get=\\\"\/api\/items\\\"\\n hx-trigger=\\\"change from:select, change from:input[type='checkbox']\\\"\\n hx-target=\\\"#items-list\\\"\\n hx-swap=\\\"innerHTML\\\"\\n hx-indicator=\\\"#filter-spinner\\\">\\n \\n <select name=\\\"status\\\">\\n <option value=\\\"\\\">Alle Status<\/option>\\n <option value=\\\"active\\\">Aktiv<\/option>\\n <option value=\\\"draft\\\">Entwurf<\/option>\\n <\/select>\\n \\n <select name=\\\"category\\\">\\n <option value=\\\"\\\">Alle Kategorien<\/option>\\n <\/select>\\n \\n <span id=\\\"filter-spinner\\\" class=\\\"htmx-indicator\\\">Filtere...<\/span>\\n<\/form><\/code><\/pre>\\n\\n<h2>Modals & Dialogs<\/h2>\\n\\n<h3>Modal laden<\/h3>\\n\\n<pre><code><button hx-get=\\\"\/api\/items\/<?= $id ?>\/edit-modal\\\"\\n hx-target=\\\"#modal-container\\\"\\n hx-swap=\\\"innerHTML\\\"\\n hx-on::after-request=\\\"document.getElementById('modal-container').showModal()\\\">\\n Bearbeiten\\n<\/button>\\n\\n<dialog id=\\\"modal-container\\\"><\/dialog><\/code><\/pre>\\n\\n<h3>Modal-Inhalt (Partial)<\/h3>\\n\\n<pre><code><form hx-put=\\\"\/api\/items\/<?= $id ?>\\\"\\n hx-headers='{\\\"X-CSRF-TOKEN\\\": \\\"<?= $csrfToken ?>\\\"}'\\n hx-target=\\\"#modal-container\\\"\\n hx-swap=\\\"innerHTML\\\"\\n hx-on::after-request=\\\"if(event.detail.successful) document.getElementById('modal-container').close()\\\">\\n \\n <h2>Bearbeiten<\/h2>\\n <input type=\\\"text\\\" name=\\\"title\\\" value=\\\"<?= htmlspecialchars($item['title']) ?>\\\">\\n \\n <button type=\\\"submit\\\">Speichern<\/button>\\n <button type=\\\"button\\\" onclick=\\\"this.closest('dialog').close()\\\">Abbrechen<\/button>\\n<\/form><\/code><\/pre>\\n\\n<h2>Polling & Updates<\/h2>\\n\\n<h3>Auto-Refresh<\/h3>\\n\\n<pre><code><div hx-get=\\\"\/api\/status\\\"\\n hx-trigger=\\\"every 5s\\\"\\n hx-swap=\\\"innerHTML\\\">\\n Status: <?= $status ?>\\n<\/div><\/code><\/pre>\\n\\n<h3>Polling mit Stop-Condition<\/h3>\\n\\n<pre><code><div hx-get=\\\"\/api\/jobs\/<?= $jobId ?>\/status\\\"\\n hx-trigger=\\\"<?= $job['status'] === 'running' ? 'every 2s' : 'none' ?>\\\"\\n hx-swap=\\\"outerHTML\\\">\\n Status: <?= $job['status'] ?>\\n <?php if ($job['status'] === 'running'): ?>\\n <span class=\\\"spinner\\\"><\/span>\\n <?php endif; ?>\\n<\/div><\/code><\/pre>\\n\\n<h2>Verwandte Themen<\/h2>\\n<ul>\\n <li><a href=\\\"\/docs\/frontend\/htmx\\\">HTMX Übersicht<\/a> - Grundlagen und Konfiguration<\/li>\\n <li><a href=\\\"\/docs\/frontend\/htmx\/troubleshooting\\\">Troubleshooting<\/a> - Häufige Probleme<\/li>\\n <li><a href=\\\"\/docs\/betrieb\/regeln\\\">Regeln<\/a> - HTMX statt fetch() Regel<\/li>\\n<\/ul>\",\n \"status\": \"published\",\n \"sort_order\": 1,\n \"depth\": 2,\n \"created_at\": \"2025-12-27T12:25:04\",\n \"updated_at\": \"2025-12-27T15:58:19\"\n }\n}"
}
]
}