From 42ec739ee9f2ef157672b7a42b5c4ca3fcce8956 Mon Sep 17 00:00:00 2001 From: Greg Kempe Date: Thu, 13 Feb 2025 13:34:57 +0200 Subject: [PATCH] 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 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 https://github.com/laws-africa/indigo/issues/2359 --- indigo/settings.py | 1 + indigo_app/js/indigo.js | 3 +++ indigo_app/middleware.py | 9 +++++++++ indigo_app/templates/base.html | 2 +- 4 files changed, 14 insertions(+), 1 deletion(-) diff --git a/indigo/settings.py b/indigo/settings.py index 0a0cd8d7f..8c44612cd 100644 --- 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 index d53da7b2a..2dbfca462 100644 --- 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 index 013add912..a07041c59 100644 --- 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 index 7f6c1cafa..dd1154928 100644 --- a/indigo_app/templates/base.html +++ b/indigo_app/templates/base.html @@ -64,7 +64,7 @@ + {% endblock %}" hx-history="false">