🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
DemoInstallSign in
Socket
DemoInstallSign in

django-htmx-partial-redirect

Package Overview
Dependencies
Maintainers
1
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

django-htmx-partial-redirect

`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.

0.1.2
PyPI
Maintainers
1

Django HTMX Partial Redirect Middleware

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.

Problem:

When a user directly accesses a URL (via address bar) that's meant to render a partial HTML view (with HTMX):

  • They see only the partial content (e.g., a login form).
  • The page lacks full context (CSS, JS, surrounding layout).

Example: Accessing /login/ shows only a <form> without styling or proper page structure.

Solution:

This middleware:

  • Intercepts direct access to partial view URLs.
  • Redirects to a full page URL of your choice.
  • Passes the original partial URL as a parameter.

Result:

  • User sees a complete, properly styled page.
  • The partial content (e.g., login form) can be lazy-loaded via HTMX by adding a check for the partial_url parameter in the template.
  • Partial content appears as intended (e.g., in a modal).

How it works:

  • User accesses /login/ directly.
  • Middleware redirects to /?partial_url=/login/.
  • Full page loads with HTMX trigger: hx-trigger="load".
  • HTMX loads /login/ content into the page (e.g., as a modal).

Installation

  • 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

Usage

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 %}

How it works

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.

Configuration

  • 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.

Notes

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>

License

This project is licensed under the MIT License.

FAQs

Did you know?

Socket

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.

Install

Related posts