disable htmx's history support, ensure caching takes htmx into account

this fixes related issues: 1. htmx was using its own caching enging to refresh the full page contents when we provided hx-push-url in a response (eg. the work listing page). this caused our scripts to run twice, since htmx stores the full <body> in the cache and re-loads it, without calling the server. 2. turning htmx history off with hx-history="false" means that it won't try to store anything in the cache, instead doing an AJAX request. 3. BUT, our server code thinks that's a partial page load, and so doesn't return a full response. So we turn off ajax htmx history off too. 4. finally, ensure we vary caches on the hx-request and hx-target attributes. closes #2359
laws-africa · Feb 13, 2025 · 42ec739 · 42ec739
1 parent cb9a05a
commit 42ec739
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 1 deletion.
diff --git a/indigo/settings.py b/indigo/settings.py
@@ -99,6 +99,7 @@
 MIDDLEWARE = (
     'django.middleware.security.SecurityMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
+    'indigo_app.middleware.VaryOnHxHeadersMiddleware',
     'django.middleware.locale.LocaleMiddleware',
     'corsheaders.middleware.CorsMiddleware',
     'django.middleware.common.CommonMiddleware',

diff --git a/indigo_app/js/indigo.js b/indigo_app/js/indigo.js
@@ -52,6 +52,9 @@ class IndigoApp {
 
   setupHtmx () {
     window.htmx = htmx;
+    // disable htmx's AJAX history; we don't use it, it causes problems with the back button and the cache, and
+    // and it re-executes all javascript on the page
+    htmx.config.refreshOnHistoryMiss = true;
     document.body.addEventListener('htmx:configRequest', (e) => {
       e.detail.headers['X-CSRFToken'] = window.Indigo.csrfToken;
     });

diff --git a/indigo_app/middleware.py b/indigo_app/middleware.py
@@ -1,6 +1,9 @@
 from django.contrib.messages import get_messages
 import json
 
+from django.utils.cache import patch_vary_headers
+from django.utils.deprecation import MiddlewareMixin
+
 
 class HtmxMessagesMiddleware:
     """ Adds a message to the Django messages framework if the request is an htmx request.
@@ -47,3 +50,9 @@ def __call__(self, request):
         response.headers["HX-Trigger"] = json.dumps(hx_trigger)
 
         return response
+
+
+class VaryOnHxHeadersMiddleware(MiddlewareMixin):
+    def process_response(self, request, response):
+        patch_vary_headers(response, ["Hx-Request", "Hx-Target"])
+        return response
diff --git a/indigo_app/templates/base.html b/indigo_app/templates/base.html
@@ -64,7 +64,7 @@
   </head>
   <body {% block body-attributes %}{% endblock %} class="{% block body-class %}
     {% if request.user.is_authenticated %}authenticated{% else %}unauthenticated{% endif %}
-    {% endblock %}">
+    {% endblock %}" hx-history="false">
     <div id="error-box" class="alert alert-danger" style="display: none">
       <button type="button" class="btn-close float-end"></button>
       <p class="message"></p>