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>
This commit is contained in:
SysAdmin Agent
2026-03-21 21:42:56 +00:00
parent 31bf348136
commit d7992558ee

View File

@@ -295,13 +295,17 @@
// ---- Preview (always set up, independent of editor mode) ---- // ---- Preview (always set up, independent of editor mode) ----
var previewFrame = document.getElementById('preview-frame'); var previewFrame = document.getElementById('preview-frame');
var previewLoading = document.getElementById('preview-loading'); var previewLoading = document.getElementById('preview-loading');
var previewLoaded = false;
function loadPreview() { function loadPreview() {
var content = getEditorContent(); 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(); var formData = new FormData();
formData.append('html_inhalt', content); formData.append('html_inhalt', content);
formData.append('csrfmiddlewaretoken', document.querySelector('[name=csrfmiddlewaretoken]').value); formData.append('csrfmiddlewaretoken', csrfEl.value);
previewLoading.style.display = 'block'; previewLoading.style.display = 'block';
previewFrame.style.display = 'none'; previewFrame.style.display = 'none';
@@ -309,22 +313,26 @@
fetch('{% url "stiftung:vorlage_vorschau" pk=vorlage.pk %}', { fetch('{% url "stiftung:vorlage_vorschau" pk=vorlage.pk %}', {
method: 'POST', method: 'POST',
body: formData, 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) { .then(function(html) {
previewFrame.srcdoc = html; previewFrame.srcdoc = html;
previewFrame.style.display = 'block'; previewFrame.style.display = 'block';
previewLoading.style.display = 'none'; previewLoading.style.display = 'none';
previewLoaded = true;
}) })
.catch(function(err) { .catch(function(err) {
previewLoading.innerHTML = '<i class="fas fa-exclamation-triangle text-danger fa-2x mb-2 d-block"></i>Vorschau fehlgeschlagen: ' + 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 // Load preview when clicking the Vorschau tab (direct click — more reliable than Bootstrap tab events)
document.getElementById('btn-tab-vorschau').addEventListener('shown.bs.tab', function() { document.getElementById('btn-tab-vorschau').addEventListener('click', function() {
loadPreview(); // Small delay so the tab pane is visible before we load
setTimeout(loadPreview, 100);
}); });
})(); })();
</script> </script>