ross/penracourses
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Enhance exam status management with HTMX loading indicators and streamline AJAX handling by removing legacy jQuery code

Browse Source
This commit is contained in:
Ross
2025-12-29 12:44:42 +00:00
parent 4ecc32f837
commit 94fbd38634
5 changed files with 140 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/exam_overview_js.html
+31 -97
View File
@@ -1,104 +1,38 @@
<script type="text/javascript">
$(document).ready(function () {
// send request to change the is_private state on customSwitches toggle
$("#exam-active-switch, .exam-active-switch").on("change", function (evt) {
$.ajax({
url: evt.currentTarget.dataset.posturl,
data: {
csrfmiddlewaretoken: "{{ csrf_token }}",
active: this.checked // true if checked else false
},
type: "POST",
dataType: "json",
})
// $.ajax().done(), $.ajax().fail(), $ajax().always() are upto you. Add/change accordingly
.done(function (data) {
console.log(data);
// HTMX loading indicator handlers: show .exam-loading near trigger or in closest .card-body
document.body.addEventListener('htmx:beforeRequest', function(evt){
try {
var trigger = evt.detail && evt.detail.elt ? evt.detail.elt : null;
if (!trigger) return;
var spinner = null;
// prefer spinner sibling of the triggering element
if (trigger.parentElement) spinner = trigger.parentElement.querySelector('.exam-loading');
// fallback to nearest card-body spinner
if (!spinner) {
var card = trigger.closest && trigger.closest('.card-body') ? trigger.closest('.card-body') : null;
if (card) spinner = card.querySelector('.exam-loading');
}
if (spinner) spinner.classList.remove('d-none');
} catch (e) { console.error('htmx beforeRequest spinner error', e); }
});
if (data.status == "success") {
toastr.info(`Exam: ${data.name} [${data.id}]
Active state changed to: ${data.active}.`)
}
// show some message according to the response.
// For eg. A message box showing that the status has been changed
})
.fail(function (jqXHR) {
console.log(jqXHR)
var msg = 'Unknown error';
try {
if (jqXHR && jqXHR.responseJSON && jqXHR.responseJSON.status) {
msg = jqXHR.responseJSON.status;
} else if (jqXHR && jqXHR.responseText) {
// fallback to raw responseText (may be HTML)
msg = jqXHR.responseText;
} else if (jqXHR && jqXHR.statusText) {
msg = jqXHR.statusText;
}
} catch (e) {
console.error('Error parsing failure response', e);
}
toastr.error(`Failed to change state<br/>${msg}`);
})
.always(function () {
console.log('[Done]');
})
})
$("#exam-publish-results-switch, .exam-publish-results-switch").on("change", function (evt) {
$.ajax({
url: evt.currentTarget.dataset.posturl,
data: {
csrfmiddlewaretoken: "{{ csrf_token }}",
publish_results: this.checked // true if checked else false
},
type: "POST",
dataType: "json",
})
// $.ajax().done(), $.ajax().fail(), $ajax().always() are upto you. Add/change accordingly
.done(function (data) {
console.log(data);
document.body.addEventListener('htmx:afterRequest', function(evt){
try {
var trigger = evt.detail && evt.detail.elt ? evt.detail.elt : null;
if (!trigger) return;
var spinner = null;
if (trigger.parentElement) spinner = trigger.parentElement.querySelector('.exam-loading');
if (!spinner) {
var card = trigger.closest && trigger.closest('.card-body') ? trigger.closest('.card-body') : null;
if (card) spinner = card.querySelector('.exam-loading');
}
if (spinner) spinner.classList.add('d-none');
} catch (e) { console.error('htmx afterRequest spinner error', e); }
});
if (data.status == "success") {
toastr.info(`Exam: ${data.name} [${data.id}]
Published state changed to: ${data.publish_results}.`)
}
// show some message according to the response.
// For eg. A message box showing that the status has been changed
})
.fail(function (data) {
toastr.error(`Failed to change state`);
})
.always(function () {
console.log('[Done]');
})
})
$(".exam-archived-switch").on("change", function (evt) {
$.ajax({
url: evt.currentTarget.dataset.posturl,
data: {
csrfmiddlewaretoken: "{{ csrf_token }}",
archive: this.checked // true if checked else false
},
type: "POST",
dataType: "json",
})
// $.ajax().done(), $.ajax().fail(), $ajax().always() are upto you. Add/change accordingly
.done(function (data) {
console.log(data);
if (data.status == "success") {
toastr.info(`Exam: ${data.name} [${data.id}]
Archived state changed to: ${data.archive}.`)
}
// show some message according to the response.
// For eg. A message box showing that the status has been changed
})
.fail(function (data) {
toastr.error(`Failed to change state`);
})
.always(function () {
console.log('[Done]');
})
})
// HTMX handles active/publish/archive toggles via server-rendered partials.
// Removed legacy jQuery AJAX handlers for exam-active, publish-results and archived toggles.
$("#button-open-access").click(function (evt) {
$.ajax({
url: evt.currentTarget.dataset.posturl,