{
"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}"
}
]
}