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:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user