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