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

Refactor show respondents buttons to improve HTMX integration and add fallback for non-HTMX environments

Browse Source
This commit is contained in:
Ross
2025-11-10 10:48:31 +00:00
parent 9c4eaceda0
commit cc7a334cb7
1 changed files with 42 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
anatomy/templates/anatomy/partials/exam_review_question_responses_fragment.html
+42 -2
View File
@@ -7,9 +7,19 @@
</div>
<div>
{% if not reveal_respondents %}
<button class="btn btn-sm btn-outline-primary" hx-get="?reveal=1" hx-target="#anatomy-responses-container" hx-swap="outerHTML">Show respondents</button>
<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-target="#anatomy-responses-container"
hx-swap="outerHTML"
data-url="{% url 'anatomy:exam_review_question_responses' exam.pk q_index %}?reveal=1"
>Show respondents</button>
{% else %}
<button class="btn btn-sm btn-outline-secondary" hx-get="?" hx-target="#anatomy-responses-container" hx-swap="outerHTML">Hide respondents</button>
<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-target="#anatomy-responses-container"
hx-swap="outerHTML"
data-url="{% url 'anatomy:exam_review_question_responses' exam.pk q_index %}"
>Hide respondents</button>
{% endif %}
</div>
</div>
@@ -48,3 +58,33 @@
{% endfor %}
</ul>
</div>
<script>
// 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
// the fragment URL (from data-url) and replace the container content.
(function(){
try {
var els = document.querySelectorAll('.show-respondents-btn');
els.forEach(function(btn){
btn.addEventListener('click', function(ev){
// If HTMX is present it will handle the request; only run fallback when not handled.
if (window.htmx) return;
ev.preventDefault();
var url = btn.getAttribute('data-url');
if (!url) return;
fetch(url, {credentials: 'same-origin'})
.then(function(r){ if (!r.ok) throw new Error('Network response was not ok'); return r.text(); })
.then(function(html){
var container = document.querySelector('#anatomy-responses-container');
if (container) container.outerHTML = html;
}).catch(function(err){
console.error('Failed to load responses fragment', err);
});
}, {passive: false});
});
} catch (e) {
// ignore
}
})();
</script>