Refactor show respondents buttons for improved readability and maintainability

This commit is contained in:
Ross
2025-11-10 10:50:02 +00:00
parent cc7a334cb7
commit 72b7940a8c
@@ -7,16 +7,16 @@
</div> </div>
<div> <div>
{% if not reveal_respondents %} {% if not reveal_respondents %}
<button type="button" class="btn btn-sm btn-outline-primary show-respondents-btn" <button type="button" class="btn btn-sm btn-outline-primary show-respondents-btn"
hx-get="{% url 'anatomy:exam_review_question_responses' exam.pk q_index %}?reveal=1" hx-get="{% url 'anatomy:exam_review_question_responses' exam.pk q_index %}?reveal=1"
hx-target="#anatomy-responses-container" hx-target="#anatomy-responses-container"
hx-swap="outerHTML" hx-swap="outerHTML"
data-url="{% url 'anatomy:exam_review_question_responses' exam.pk q_index %}?reveal=1" data-url="{% url 'anatomy:exam_review_question_responses' exam.pk q_index %}?reveal=1"
>Show respondents</button> >Show respondents</button>
{% else %} {% else %}
<button type="button" class="btn btn-sm btn-outline-secondary show-respondents-btn" <button type="button" class="btn btn-sm btn-outline-secondary show-respondents-btn"
hx-get="{% url 'anatomy:exam_review_question_responses' exam.pk q_index %}" hx-get="{% url 'anatomy:exam_review_question_responses' exam.pk q_index %}"
hx-target="#anatomy-responses-container" hx-target="#anatomy-responses-container"
hx-swap="outerHTML" hx-swap="outerHTML"
data-url="{% url 'anatomy:exam_review_question_responses' exam.pk q_index %}" data-url="{% url 'anatomy:exam_review_question_responses' exam.pk q_index %}"
>Hide respondents</button> >Hide respondents</button>
@@ -63,28 +63,28 @@
// Fallback for environments where HTMX isn't active or the hx-* attributes don't trigger. // Fallback for environments where HTMX isn't active or the hx-* attributes don't trigger.
// Attach a click handler to buttons with class .show-respondents-btn that will fetch // Attach a click handler to buttons with class .show-respondents-btn that will fetch
// the fragment URL (from data-url) and replace the container content. // the fragment URL (from data-url) and replace the container content.
(function(){ (function(){
try { try {
var els = document.querySelectorAll('.show-respondents-btn'); var els = document.querySelectorAll('.show-respondents-btn');
els.forEach(function(btn){ els.forEach(function(btn){
btn.addEventListener('click', function(ev){ btn.addEventListener('click', function(ev){
// If HTMX is present it will handle the request; only run fallback when not handled. // If HTMX is present it will handle the request; only run fallback when not handled.
if (window.htmx) return; if (window.htmx) return;
ev.preventDefault(); ev.preventDefault();
var url = btn.getAttribute('data-url'); var url = btn.getAttribute('data-url');
if (!url) return; if (!url) return;
fetch(url, {credentials: 'same-origin'}) fetch(url, {credentials: 'same-origin'})
.then(function(r){ if (!r.ok) throw new Error('Network response was not ok'); return r.text(); }) .then(function(r){ if (!r.ok) throw new Error('Network response was not ok'); return r.text(); })
.then(function(html){ .then(function(html){
var container = document.querySelector('#anatomy-responses-container'); var container = document.querySelector('#anatomy-responses-container');
if (container) container.outerHTML = html; if (container) container.outerHTML = html;
}).catch(function(err){ }).catch(function(err){
console.error('Failed to load responses fragment', err); console.error('Failed to load responses fragment', err);
}); });
}, {passive: false}); }, {passive: false});
}); });
} catch (e) { } catch (e) {
// ignore // ignore
} }
})(); })();
</script> </script>