{
"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\": \"# HTMX Patterns Referenz\\n\\nKopierbare Patterns für häufige Anwendungsfälle.\\n\\n## CRUD-Operationen\\n\\n### Create (POST)\\n\\n```php\\n<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>\\n```\\n\\n### Read (GET mit Partial)\\n\\n```php\\n<div hx-get=\\\"\/api\/items\/<?= $id ?>\/details\\\"\\n hx-trigger=\\\"revealed\\\"\\n hx-swap=\\\"innerHTML\\\">\\n Lade Details...\\n<\/div>\\n```\\n\\n### Update (PUT)\\n\\n```php\\n<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>\\n```\\n\\n### Delete (DELETE)\\n\\n```php\\n<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>\\n```\\n\\n## Inline-Editing\\n\\n### Text-Input mit Auto-Save\\n\\n```php\\n<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)\\\">\\n```\\n\\n### Select mit Auto-Save\\n\\n```php\\n<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>\\n```\\n\\n### Toggle (Checkbox)\\n\\n```php\\n<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\\\">\\n```\\n\\n## Listen & Tabellen\\n\\n### Lazy-Load Tabelle\\n\\n```php\\n<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>\\n```\\n\\n### Infinite Scroll\\n\\n```php\\n<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>\\n```\\n\\n### Sortierbare Spalten\\n\\n```php\\n<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>\\n```\\n\\n## Suche & Filter\\n\\n### Live-Search\\n\\n```php\\n<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>\\n```\\n\\n### Filter-Form\\n\\n```php\\n<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 <!-- ... -->\\n <\/select>\\n \\n <span id=\\\"filter-spinner\\\" class=\\\"htmx-indicator\\\">Filtere...<\/span>\\n<\/form>\\n```\\n\\n## Modals & Dialogs\\n\\n### Modal laden\\n\\n```php\\n<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>\\n```\\n\\n### Modal-Inhalt (Partial)\\n\\n```php\\n<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>\\n```\\n\\n## Polling & Updates\\n\\n### Auto-Refresh\\n\\n```php\\n<div hx-get=\\\"\/api\/status\\\"\\n hx-trigger=\\\"every 5s\\\"\\n hx-swap=\\\"innerHTML\\\">\\n Status: <?= $status ?>\\n<\/div>\\n```\\n\\n### Polling mit Stop-Condition\\n\\n```php\\n<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>\\n```\",\n \"status\": \"published\",\n \"sort_order\": 1,\n \"depth\": 2,\n \"created_at\": \"2025-12-27T12:25:04\",\n \"updated_at\": \"2025-12-27T12:25:04\"\n }\n}"
}
]
}