{
"event": "PreToolUse",
"tool_name": "mcp__mcp-docs__docs_create",
"tool_input": {
"title": "HTMX Troubleshooting",
"slug": "troubleshooting",
"parent_id": 145,
"description": "Häufige Probleme und Lösungen bei HTMX",
"status": "published",
"sort_order": 2,
"content": "# HTMX Troubleshooting\n\n## Häufige Probleme\n\n### 1. CSRF-Token Fehler (403)\n\n**Symptom:** Request schlägt mit 403 fehl.\n\n**Ursache:** `hx-headers` fehlt oder Token ist ungültig.\n\n**Lösung:**\n```php\nhx-headers='{\"X-CSRF-TOKEN\": \"<?= $csrfToken ?>\"}'\n```\n\n**Prüfen:**\n- DevTools → Network → Request Headers → X-CSRF-TOKEN vorhanden?\n- Token in Session gültig?\n\n### 2. hx-indicator zeigt nichts an\n\n**Symptom:** Loading-Spinner erscheint nicht.\n\n**Ursache:** `hx-indicator` zeigt auf Element, CSS fehlt.\n\n**Lösung:**\n```php\n<!-- Indicator braucht ID oder Selektor -->\n<button hx-indicator=\"#my-spinner\">...<\/button>\n<span id=\"my-spinner\" class=\"htmx-indicator\">Loading...<\/span>\n```\n\n```css\n\/* CSS muss vorhanden sein *\/\n.htmx-indicator { display: none; }\n.htmx-request .htmx-indicator { display: inline; }\n```\n\n### 3. Response wird nicht angezeigt\n\n**Symptom:** Request erfolgreich, aber nichts passiert.\n\n**Ursachen:**\n1. `hx-target` zeigt auf nicht existierendes Element\n2. `hx-swap=\"none\"` gesetzt\n3. Response ist leer\n\n**Debugging:**\n```php\n<!-- Temporär hinzufügen -->\nhx-on::after-request=\"console.log('Response:', event.detail.xhr.responseText)\"\n```\n\n### 4. Button bleibt disabled\n\n**Symptom:** Nach Request bleibt Button deaktiviert.\n\n**Ursache:** `hx-disabled-elt` wird nicht zurückgesetzt bei Fehler.\n\n**Lösung:** HTMX macht das automatisch. Prüfen ob JS den Button manuell disabled.\n\n### 5. Doppelte Requests\n\n**Symptom:** Ein Klick löst mehrere Requests aus.\n\n**Ursachen:**\n1. Event-Bubbling (Button in Form)\n2. Mehrere HTMX-Attribute matchen\n\n**Lösung:**\n```php\n<!-- Bei Button in Form -->\n<button type=\"button\" hx-post=\"...\"> <!-- type=\"button\" statt submit -->\n\n<!-- Oder -->\n<form hx-post=\"...\" hx-trigger=\"submit\">\n <button type=\"submit\">Submit<\/button> <!-- Nur form hat hx-post -->\n<\/form>\n```\n\n### 6. Form-Daten werden nicht gesendet\n\n**Symptom:** POST-Request hat leeren Body.\n\n**Ursache:** `hx-*` auf Button statt Form.\n\n**Lösung:**\n```php\n<!-- Falsch: hx-post auf Button sendet keine Form-Daten -->\n<form>\n <input name=\"title\">\n <button hx-post=\"\/api\">Send<\/button>\n<\/form>\n\n<!-- Richtig: hx-post auf Form -->\n<form hx-post=\"\/api\">\n <input name=\"title\">\n <button type=\"submit\">Send<\/button>\n<\/form>\n```\n\n### 7. History\/Back-Button Probleme\n\n**Symptom:** Browser-Back funktioniert nicht wie erwartet.\n\n**Ursache:** HTMX ersetzt Inhalte ohne History-Push.\n\n**Lösung:**\n```php\n<!-- Für Navigation, die History braucht -->\n<a href=\"\/page\" hx-push-url=\"true\" hx-get=\"\/page\" hx-target=\"#main\">Link<\/a>\n\n<!-- Oder: Normaler Link ohne HTMX -->\n<a href=\"\/page\">Link<\/a>\n```\n\n## Debugging-Tools\n\n### 1. HTMX Debug-Extension\n\n```html\n<script src=\"https:\/\/unpkg.com\/htmx.org\/dist\/ext\/debug.js\"><\/script>\n<body hx-ext=\"debug\">\n```\n\nLoggt alle HTMX-Events in die Console.\n\n### 2. Request\/Response in DevTools\n\n1. DevTools → Network\n2. XHR\/Fetch filtern\n3. Request Headers prüfen (X-CSRF-TOKEN, HX-Request)\n4. Response Body prüfen\n\n### 3. HTMX Events manuell loggen\n\n```javascript\ndocument.body.addEventListener('htmx:beforeRequest', (e) => {\n console.log('Before:', e.detail);\n});\n\ndocument.body.addEventListener('htmx:afterRequest', (e) => {\n console.log('After:', e.detail);\n console.log('Response:', e.detail.xhr.responseText);\n});\n\ndocument.body.addEventListener('htmx:responseError', (e) => {\n console.error('Error:', e.detail);\n});\n```\n\n## Pre-Hook Fehlermeldungen\n\n### \"hx-post at line X missing CSRF token\"\n\n**Bedeutung:** HTMX-C1 verletzt.\n\n**Fix:**\n```php\nhx-headers='{\"X-CSRF-TOKEN\": \"<?= $csrfToken ?>\"}'\n```\n\n### \"hx-delete at line X missing confirmation\"\n\n**Bedeutung:** HTMX-C4 verletzt.\n\n**Fix:**\n```php\nhx-confirm=\"Wirklich löschen?\"\n```\n\n## Best Practices\n\n### 1. Immer explizites Target\n\n```php\n<!-- Gut -->\nhx-target=\"#result-container\"\n\n<!-- Vermeiden (ersetzt Element selbst) -->\nhx-target=\"this\"\n```\n\n### 2. Expliziter Swap-Modus\n\n```php\n<!-- Gut -->\nhx-swap=\"innerHTML\"\n\n<!-- Vermeiden (Default ist innerHTML, aber explizit ist klarer) -->\n(kein hx-swap)\n```\n\n### 3. Feedback bei hx-swap=\"none\"\n\n```php\n<!-- Bei hx-swap=\"none\" braucht User visuelles Feedback -->\n<input hx-swap=\"none\"\n hx-on::after-request=\"this.classList.add('is-saved'); setTimeout(() => this.classList.remove('is-saved'), 1000)\">\n```"
}
}
{
"tool_response": [
{
"type": "text",
"text": "{\n \"success\": true,\n \"doc\": {\n \"id\": 147,\n \"parent_id\": 145,\n \"slug\": \"troubleshooting\",\n \"path\": \"\/frontend\/htmx\/troubleshooting\",\n \"title\": \"HTMX Troubleshooting\",\n \"description\": \"Häufige Probleme und Lösungen bei HTMX\",\n \"content\": \"# HTMX Troubleshooting\\n\\n## Häufige Probleme\\n\\n### 1. CSRF-Token Fehler (403)\\n\\n**Symptom:** Request schlägt mit 403 fehl.\\n\\n**Ursache:** `hx-headers` fehlt oder Token ist ungültig.\\n\\n**Lösung:**\\n```php\\nhx-headers='{\\\"X-CSRF-TOKEN\\\": \\\"<?= $csrfToken ?>\\\"}'\\n```\\n\\n**Prüfen:**\\n- DevTools → Network → Request Headers → X-CSRF-TOKEN vorhanden?\\n- Token in Session gültig?\\n\\n### 2. hx-indicator zeigt nichts an\\n\\n**Symptom:** Loading-Spinner erscheint nicht.\\n\\n**Ursache:** `hx-indicator` zeigt auf Element, CSS fehlt.\\n\\n**Lösung:**\\n```php\\n<!-- Indicator braucht ID oder Selektor -->\\n<button hx-indicator=\\\"#my-spinner\\\">...<\/button>\\n<span id=\\\"my-spinner\\\" class=\\\"htmx-indicator\\\">Loading...<\/span>\\n```\\n\\n```css\\n\/* CSS muss vorhanden sein *\/\\n.htmx-indicator { display: none; }\\n.htmx-request .htmx-indicator { display: inline; }\\n```\\n\\n### 3. Response wird nicht angezeigt\\n\\n**Symptom:** Request erfolgreich, aber nichts passiert.\\n\\n**Ursachen:**\\n1. `hx-target` zeigt auf nicht existierendes Element\\n2. `hx-swap=\\\"none\\\"` gesetzt\\n3. Response ist leer\\n\\n**Debugging:**\\n```php\\n<!-- Temporär hinzufügen -->\\nhx-on::after-request=\\\"console.log('Response:', event.detail.xhr.responseText)\\\"\\n```\\n\\n### 4. Button bleibt disabled\\n\\n**Symptom:** Nach Request bleibt Button deaktiviert.\\n\\n**Ursache:** `hx-disabled-elt` wird nicht zurückgesetzt bei Fehler.\\n\\n**Lösung:** HTMX macht das automatisch. Prüfen ob JS den Button manuell disabled.\\n\\n### 5. Doppelte Requests\\n\\n**Symptom:** Ein Klick löst mehrere Requests aus.\\n\\n**Ursachen:**\\n1. Event-Bubbling (Button in Form)\\n2. Mehrere HTMX-Attribute matchen\\n\\n**Lösung:**\\n```php\\n<!-- Bei Button in Form -->\\n<button type=\\\"button\\\" hx-post=\\\"...\\\"> <!-- type=\\\"button\\\" statt submit -->\\n\\n<!-- Oder -->\\n<form hx-post=\\\"...\\\" hx-trigger=\\\"submit\\\">\\n <button type=\\\"submit\\\">Submit<\/button> <!-- Nur form hat hx-post -->\\n<\/form>\\n```\\n\\n### 6. Form-Daten werden nicht gesendet\\n\\n**Symptom:** POST-Request hat leeren Body.\\n\\n**Ursache:** `hx-*` auf Button statt Form.\\n\\n**Lösung:**\\n```php\\n<!-- Falsch: hx-post auf Button sendet keine Form-Daten -->\\n<form>\\n <input name=\\\"title\\\">\\n <button hx-post=\\\"\/api\\\">Send<\/button>\\n<\/form>\\n\\n<!-- Richtig: hx-post auf Form -->\\n<form hx-post=\\\"\/api\\\">\\n <input name=\\\"title\\\">\\n <button type=\\\"submit\\\">Send<\/button>\\n<\/form>\\n```\\n\\n### 7. History\/Back-Button Probleme\\n\\n**Symptom:** Browser-Back funktioniert nicht wie erwartet.\\n\\n**Ursache:** HTMX ersetzt Inhalte ohne History-Push.\\n\\n**Lösung:**\\n```php\\n<!-- Für Navigation, die History braucht -->\\n<a href=\\\"\/page\\\" hx-push-url=\\\"true\\\" hx-get=\\\"\/page\\\" hx-target=\\\"#main\\\">Link<\/a>\\n\\n<!-- Oder: Normaler Link ohne HTMX -->\\n<a href=\\\"\/page\\\">Link<\/a>\\n```\\n\\n## Debugging-Tools\\n\\n### 1. HTMX Debug-Extension\\n\\n```html\\n<script src=\\\"https:\/\/unpkg.com\/htmx.org\/dist\/ext\/debug.js\\\"><\/script>\\n<body hx-ext=\\\"debug\\\">\\n```\\n\\nLoggt alle HTMX-Events in die Console.\\n\\n### 2. Request\/Response in DevTools\\n\\n1. DevTools → Network\\n2. XHR\/Fetch filtern\\n3. Request Headers prüfen (X-CSRF-TOKEN, HX-Request)\\n4. Response Body prüfen\\n\\n### 3. HTMX Events manuell loggen\\n\\n```javascript\\ndocument.body.addEventListener('htmx:beforeRequest', (e) => {\\n console.log('Before:', e.detail);\\n});\\n\\ndocument.body.addEventListener('htmx:afterRequest', (e) => {\\n console.log('After:', e.detail);\\n console.log('Response:', e.detail.xhr.responseText);\\n});\\n\\ndocument.body.addEventListener('htmx:responseError', (e) => {\\n console.error('Error:', e.detail);\\n});\\n```\\n\\n## Pre-Hook Fehlermeldungen\\n\\n### \\\"hx-post at line X missing CSRF token\\\"\\n\\n**Bedeutung:** HTMX-C1 verletzt.\\n\\n**Fix:**\\n```php\\nhx-headers='{\\\"X-CSRF-TOKEN\\\": \\\"<?= $csrfToken ?>\\\"}'\\n```\\n\\n### \\\"hx-delete at line X missing confirmation\\\"\\n\\n**Bedeutung:** HTMX-C4 verletzt.\\n\\n**Fix:**\\n```php\\nhx-confirm=\\\"Wirklich löschen?\\\"\\n```\\n\\n## Best Practices\\n\\n### 1. Immer explizites Target\\n\\n```php\\n<!-- Gut -->\\nhx-target=\\\"#result-container\\\"\\n\\n<!-- Vermeiden (ersetzt Element selbst) -->\\nhx-target=\\\"this\\\"\\n```\\n\\n### 2. Expliziter Swap-Modus\\n\\n```php\\n<!-- Gut -->\\nhx-swap=\\\"innerHTML\\\"\\n\\n<!-- Vermeiden (Default ist innerHTML, aber explizit ist klarer) -->\\n(kein hx-swap)\\n```\\n\\n### 3. Feedback bei hx-swap=\\\"none\\\"\\n\\n```php\\n<!-- Bei hx-swap=\\\"none\\\" braucht User visuelles Feedback -->\\n<input hx-swap=\\\"none\\\"\\n hx-on::after-request=\\\"this.classList.add('is-saved'); setTimeout(() => this.classList.remove('is-saved'), 1000)\\\">\\n```\",\n \"status\": \"published\",\n \"sort_order\": 2,\n \"depth\": 2,\n \"created_at\": \"2025-12-27T12:25:05\",\n \"updated_at\": \"2025-12-27T12:25:05\"\n },\n \"message\": \"Document 'HTMX Troubleshooting' created with ID 147\"\n}"
}
]
}