{
"event": "PreToolUse",
"tool_name": "mcp__mcp-docs__docs_get",
"tool_input": {
"path": "\/frontend\/htmx\/troubleshooting"
}
}
{
"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\": \"<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 Troubleshooting\\n<\/nav>\\n\\n<h1>HTMX Troubleshooting<\/h1>\\n<p class=\\\"doc-meta\\\"><strong>Erstellt:<\/strong> 2025-12-27 | <strong>Aktualisiert:<\/strong> 2025-12-27<\/p>\\n\\n\\n<h2>Häufige Probleme<\/h2>\\n\\n<h3>1. CSRF-Token Fehler (403)<\/h3>\\n\\n<table>\\n <tr><th>Symptom<\/th><td>Request schlägt mit 403 fehl<\/td><\/tr>\\n <tr><th>Ursache<\/th><td><code>hx-headers<\/code> fehlt oder Token ist ungültig<\/td><\/tr>\\n <tr><th>Lösung<\/th><td><code>hx-headers='{\\\"X-CSRF-TOKEN\\\": \\\"<?= $csrfToken ?>\\\"}'<\/code><\/td><\/tr>\\n<\/table>\\n\\n<p><strong>Prüfen:<\/strong><\/p>\\n<ul>\\n <li>DevTools → Network → Request Headers → X-CSRF-TOKEN vorhanden?<\/li>\\n <li>Token in Session gültig?<\/li>\\n<\/ul>\\n\\n<h3>2. hx-indicator zeigt nichts an<\/h3>\\n\\n<table>\\n <tr><th>Symptom<\/th><td>Loading-Spinner erscheint nicht<\/td><\/tr>\\n <tr><th>Ursache<\/th><td><code>hx-indicator<\/code> zeigt auf Element, CSS fehlt<\/td><\/tr>\\n<\/table>\\n\\n<p><strong>Lösung:<\/strong><\/p>\\n<pre><code><!-- Indicator braucht ID oder Selektor -->\\n<button hx-indicator=\\\"#my-spinner\\\">...<\/button>\\n<span id=\\\"my-spinner\\\" class=\\\"htmx-indicator\\\">Loading...<\/span><\/code><\/pre>\\n\\n<pre><code>\/* CSS muss vorhanden sein *\/\\n.htmx-indicator { display: none; }\\n.htmx-request .htmx-indicator { display: inline; }<\/code><\/pre>\\n\\n<h3>3. Response wird nicht angezeigt<\/h3>\\n\\n<table>\\n <tr><th>Symptom<\/th><td>Request erfolgreich, aber nichts passiert<\/td><\/tr>\\n <tr><th>Ursachen<\/th><td>\\n <ol>\\n <li><code>hx-target<\/code> zeigt auf nicht existierendes Element<\/li>\\n <li><code>hx-swap=\\\"none\\\"<\/code> gesetzt<\/li>\\n <li>Response ist leer<\/li>\\n <\/ol>\\n <\/td><\/tr>\\n<\/table>\\n\\n<p><strong>Debugging:<\/strong><\/p>\\n<pre><code><!-- Temporär hinzufügen -->\\nhx-on::after-request=\\\"console.log('Response:', event.detail.xhr.responseText)\\\"<\/code><\/pre>\\n\\n<h3>4. Button bleibt disabled<\/h3>\\n\\n<table>\\n <tr><th>Symptom<\/th><td>Nach Request bleibt Button deaktiviert<\/td><\/tr>\\n <tr><th>Ursache<\/th><td><code>hx-disabled-elt<\/code> wird nicht zurückgesetzt bei Fehler<\/td><\/tr>\\n <tr><th>Lösung<\/th><td>HTMX macht das automatisch. Prüfen ob JS den Button manuell disabled.<\/td><\/tr>\\n<\/table>\\n\\n<h3>5. Doppelte Requests<\/h3>\\n\\n<table>\\n <tr><th>Symptom<\/th><td>Ein Klick löst mehrere Requests aus<\/td><\/tr>\\n <tr><th>Ursachen<\/th><td>\\n <ol>\\n <li>Event-Bubbling (Button in Form)<\/li>\\n <li>Mehrere HTMX-Attribute matchen<\/li>\\n <\/ol>\\n <\/td><\/tr>\\n<\/table>\\n\\n<p><strong>Lösung:<\/strong><\/p>\\n<pre><code><!-- 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><\/code><\/pre>\\n\\n<h3>6. Form-Daten werden nicht gesendet<\/h3>\\n\\n<table>\\n <tr><th>Symptom<\/th><td>POST-Request hat leeren Body<\/td><\/tr>\\n <tr><th>Ursache<\/th><td><code>hx-*<\/code> auf Button statt Form<\/td><\/tr>\\n<\/table>\\n\\n<p><strong>Falsch:<\/strong><\/p>\\n<pre><code><form>\\n <input name=\\\"title\\\">\\n <button hx-post=\\\"\/api\\\">Send<\/button>\\n<\/form><\/code><\/pre>\\n\\n<p><strong>Richtig:<\/strong><\/p>\\n<pre><code><form hx-post=\\\"\/api\\\">\\n <input name=\\\"title\\\">\\n <button type=\\\"submit\\\">Send<\/button>\\n<\/form><\/code><\/pre>\\n\\n<h3>7. History\/Back-Button Probleme<\/h3>\\n\\n<table>\\n <tr><th>Symptom<\/th><td>Browser-Back funktioniert nicht wie erwartet<\/td><\/tr>\\n <tr><th>Ursache<\/th><td>HTMX ersetzt Inhalte ohne History-Push<\/td><\/tr>\\n<\/table>\\n\\n<p><strong>Lösung:<\/strong><\/p>\\n<pre><code><!-- 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><\/code><\/pre>\\n\\n<h2>Debugging-Tools<\/h2>\\n\\n<h3>1. HTMX Debug-Extension<\/h3>\\n\\n<pre><code><script src=\\\"https:\/\/unpkg.com\/htmx.org\/dist\/ext\/debug.js\\\"><\/script>\\n<body hx-ext=\\\"debug\\\"><\/code><\/pre>\\n\\n<p>Loggt alle HTMX-Events in die Console.<\/p>\\n\\n<h3>2. Request\/Response in DevTools<\/h3>\\n\\n<ol>\\n <li>DevTools → Network<\/li>\\n <li>XHR\/Fetch filtern<\/li>\\n <li>Request Headers prüfen (X-CSRF-TOKEN, HX-Request)<\/li>\\n <li>Response Body prüfen<\/li>\\n<\/ol>\\n\\n<h3>3. HTMX Events manuell loggen<\/h3>\\n\\n<pre><code>document.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});<\/code><\/pre>\\n\\n<h2>Pre-Hook Fehlermeldungen<\/h2>\\n\\n<h3>\\\"hx-post at line X missing CSRF token\\\"<\/h3>\\n\\n<table>\\n <tr><th>Bedeutung<\/th><td>HTMX-C1 verletzt<\/td><\/tr>\\n <tr><th>Fix<\/th><td><code>hx-headers='{\\\"X-CSRF-TOKEN\\\": \\\"<?= $csrfToken ?>\\\"}'<\/code><\/td><\/tr>\\n<\/table>\\n\\n<h3>\\\"hx-delete at line X missing confirmation\\\"<\/h3>\\n\\n<table>\\n <tr><th>Bedeutung<\/th><td>HTMX-C4 verletzt<\/td><\/tr>\\n <tr><th>Fix<\/th><td><code>hx-confirm=\\\"Wirklich löschen?\\\"<\/code><\/td><\/tr>\\n<\/table>\\n\\n<h2>Best Practices<\/h2>\\n\\n<h3>1. Immer explizites Target<\/h3>\\n\\n<pre><code><!-- Gut -->\\nhx-target=\\\"#result-container\\\"\\n\\n<!-- Vermeiden (ersetzt Element selbst) -->\\nhx-target=\\\"this\\\"<\/code><\/pre>\\n\\n<h3>2. Expliziter Swap-Modus<\/h3>\\n\\n<pre><code><!-- Gut -->\\nhx-swap=\\\"innerHTML\\\"\\n\\n<!-- Vermeiden (Default ist innerHTML, aber explizit ist klarer) -->\\n(kein hx-swap)<\/code><\/pre>\\n\\n<h3>3. Feedback bei hx-swap=\\\"none\\\"<\/h3>\\n\\n<pre><code><!-- 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)\\\"><\/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\/patterns\\\">Patterns<\/a> - Alle Code-Patterns<\/li>\\n <li><a href=\\\"\/docs\/betrieb\/regeln\\\">Regeln<\/a> - HTMX statt fetch() Regel<\/li>\\n<\/ul>\",\n \"status\": \"published\",\n \"sort_order\": 2,\n \"depth\": 2,\n \"created_at\": \"2025-12-27T12:25:05\",\n \"updated_at\": \"2025-12-27T15:58:19\"\n }\n}"
}
]
}