
Security News
Node.js Moves Toward Stable TypeScript Support with Amaro 1.0
Amaro 1.0 lays the groundwork for stable TypeScript support in Node.js, bringing official .ts loading closer to reality.
django-htmx-partial-redirect
Advanced tools
`django-htmx-partial-redirect` is a middleware that redirects direct accesses to partial views (like login modals) to a full page, where the partial content is then lazy-loaded via HTMX, solving the issue of empty pages when accessing modal-intended views directly.
This Django middleware redirects direct accesses to HTMX partial views (e.g., modal content) to a full page, passing the original URL as a 'partial_url' parameter.
When a user directly accesses a URL (via address bar) that's meant to render a partial HTML view (with HTMX):
Example: Accessing /login/
shows only a <form>
without styling or proper page structure.
This middleware:
partial_url
parameter in the template./login/
directly./?partial_url=/login/
.hx-trigger="load"
./login/
content into the page (e.g., as a modal).Install the package:
pip install django-htmx-partial-redirect
Add the middleware to your MIDDLEWARE
in settings.py
:
MIDDLEWARE = [
# ...
'django_htmx_partial_redirect.middleware.HTMXPartialViewRedirectMiddleware',
# ...
]
Configure the settings in your settings.py
:
HTMX_PARTIAL_VIEWS = ['login', 'signup', 'logout'] # List of view names to be treated as partial
HTMX_PARTIAL_VIEWS_REDIRECT_URL = '/' # URL to redirect to when accessing partial views directly
In your base template, add this snippet at the end of the <body>
tag:
{% if request.GET.partial_url %}
<div hx-trigger="load"
hx-get="{{ request.GET.partial_url }}"
hx-swap="outerHTML">
</div>
{% endif %}
Create a base modal template (e.g., modal_base.html
):
<dialog hx-on::load="this.showModal()"
hx-on:close="this.remove()">
<!-- Backdrop (click to close) -->
<form method="dialog" class="fixed inset-0 cursor-pointer -z-10" hx-on:click="this.submit()"></form>
<!-- Modal content -->
<div id="modal-content">
{% block content %}{% endblock %}
</div>
</dialog>
In your partial views (e.g., login, signup), extend the modal base:
{% extends "modal_base.html" %}
{% block content %}
<!-- Your form or content here -->
{% endblock %}
The middleware intercepts requests to the specified HTMX partial views when they're accessed directly (not via HTMX). It then redirects to the specified full page URL, adding the original partial view URL as a partial_url
parameter.
HTMX_PARTIAL_VIEWS
: A list of view names to be treated as HTMX partial views.HTMX_PARTIAL_VIEWS_REDIRECT_URL
: The URL to redirect to when a partial view is accessed directly.If you don't want users to see the parameter in the URL (e.g. /?partial_url=/login/
), you can use the hx-push-url
attribute to update the URL in the address bar:
<div hx-trigger="load"
hx-get="{{ request.GET.partial_url }}"
hx-swap="outerHTML"
hx-push-url="/">
</div>
This project is licensed under the MIT License.
FAQs
`django-htmx-partial-redirect` is a middleware that redirects direct accesses to partial views (like login modals) to a full page, where the partial content is then lazy-loaded via HTMX, solving the issue of empty pages when accessing modal-intended views directly.
We found that django-htmx-partial-redirect demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Amaro 1.0 lays the groundwork for stable TypeScript support in Node.js, bringing official .ts loading closer to reality.
Research
A deceptive PyPI package posing as an Instagram growth tool collects user credentials and sends them to third-party bot services.
Product
Socket now supports pylock.toml, enabling secure, reproducible Python builds with advanced scanning and full alignment with PEP 751's new standard.