From d7992558ee85fd373487412606715718f5d74b33 Mon Sep 17 00:00:00 2001
From: SysAdmin Agent <sysadmin@vhtv-stiftung.de>
Date: Sat, 21 Mar 2026 21:42:56 +0000
Subject: [PATCH] Fix Vorlagen preview: use click handler instead of Bootstrap
 tab event (STI-82)

The shown.bs.tab event never fired, leaving the preview spinner forever.
Switched to a direct click handler with setTimeout for reliability.
Also added explicit credentials and HTTP error handling to the fetch.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/templates/stiftung/vorlage_editor.html | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/app/templates/stiftung/vorlage_editor.html b/app/templates/stiftung/vorlage_editor.html
index 427df9d..4fb858d 100644
--- a/app/templates/stiftung/vorlage_editor.html
+++ b/app/templates/stiftung/vorlage_editor.html
@@ -295,13 +295,17 @@
     // ---- Preview (always set up, independent of editor mode) ----
     var previewFrame = document.getElementById('preview-frame');
     var previewLoading = document.getElementById('preview-loading');
-    var previewLoaded = false;
 
     function loadPreview() {
         var content = getEditorContent();
+        var csrfEl = document.querySelector('[name=csrfmiddlewaretoken]');
+        if (!csrfEl) {
+            previewLoading.innerHTML = '<i class="fas fa-exclamation-triangle text-danger fa-2x mb-2 d-block"></i>CSRF-Token nicht gefunden.';
+            return;
+        }
         var formData = new FormData();
         formData.append('html_inhalt', content);
-        formData.append('csrfmiddlewaretoken', document.querySelector('[name=csrfmiddlewaretoken]').value);
+        formData.append('csrfmiddlewaretoken', csrfEl.value);
 
         previewLoading.style.display = 'block';
         previewFrame.style.display = 'none';
@@ -309,22 +313,26 @@
         fetch('{% url "stiftung:vorlage_vorschau" pk=vorlage.pk %}', {
             method: 'POST',
             body: formData,
+            credentials: 'same-origin',
+        })
+        .then(function(r) {
+            if (!r.ok) throw new Error('HTTP ' + r.status);
+            return r.text();
         })
-        .then(function(r) { return r.text(); })
         .then(function(html) {
             previewFrame.srcdoc = html;
             previewFrame.style.display = 'block';
             previewLoading.style.display = 'none';
-            previewLoaded = true;
         })
         .catch(function(err) {
             previewLoading.innerHTML = '<i class="fas fa-exclamation-triangle text-danger fa-2x mb-2 d-block"></i>Vorschau fehlgeschlagen: ' + err;
         });
     }
 
-    // Load preview when switching to the Vorschau tab
-    document.getElementById('btn-tab-vorschau').addEventListener('shown.bs.tab', function() {
-        loadPreview();
+    // Load preview when clicking the Vorschau tab (direct click — more reliable than Bootstrap tab events)
+    document.getElementById('btn-tab-vorschau').addEventListener('click', function() {
+        // Small delay so the tab pane is visible before we load
+        setTimeout(loadPreview, 100);
     });
 })();
 </script>