{
"event": "PreToolUse",
"tool_name": "mcp__mcp-docs__docs_update",
"tool_input": {
"id": 146,
"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\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>"
}
}
{
"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\\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:44:41\"\n },\n \"message\": \"Document #146 updated\"\n}"
}
]
}