Skip to main content

hx-requests

Full documentation: hx-requests Documentation Demo Website: https://hx-requests-demo.com/


pre-commit Code style: ruff Code style: djlint

Overview

What Are hx-requests?

To start with a high-level explanation, hx-requests are quasi Django + Htmx views. They mimic Django's class-based views but with added functionality to work seamlessly with Htmx. Using a View mixin, it elegantly handles multiple Htmx requests on a single page. Each Htmx request is routed to a specific hx-request (think of it as a view), which returns the necessary HTML to update the DOM. A more detailed explanation can be found below.

Why The Name?

Excellent question! The package was named early on in the development process when the behavior wasn't exactly clear. All that was clear was that there needed to be an easier way to work with Htmx in Django. Hx comes from Htmx, and requests because every use of Htmx is a request to the server. If it was named today, it would probably be called something like Django-Htmx-Views, but hx-requests has stuck.

Why Use hx-requests?

This is where we will get into the details of why hx-requests is needed.

There are multiple ways of integrating Htmx in a Django project.

1. Using The Page View

The most common way is re-hitting the view that loaded the page.

The base view:

class MyView(View):
    def get(self, request):
        return render(request, "my_template.html")

The template:

<div hx-get="{% url 'my_view' %}">
    <p>Click me to use hx-get</p>
</div>

Handling the request:

class MyView(View):
    def get(self, request):
        if request.headers.get("HX-Request"):
            return render(request, "my_template.html")
        return render(request, "my_template.html")

This approach works well for views with one Htmx request, but what if you have multiple Htmx requests on the same page?

Handling multiple Htmx requests:

class MyView(View):
    def get(self, request):
        if request.headers.get("HX-Request"):
            if request.headers.get("Unique-Identifier") == "get_user_info":
                return render(request, "user_info_card.html")
            if request.headers.get("Unique-Identifier") == "get_user_profile":
                return render(request, "user_profile_card.html")
        return render(request, "my_template.html")

Issues with this approach:

  • It gets messy if there are multiple Htmx requests on the same page.
  • Handling POST requests with specific logic dynamically adds complexity.
  • The logic for handling Htmx requests is tightly coupled to the view, making reuse difficult.

2. Using Separate Views

Each Htmx request is routed to a separate view.

# Page View
class MyView(View):
    def get(self, request):
        context = {'complex-context': "This is a complex context"}
        return render(request, "my_template.html", context)

# Htmx Request 1
class GetUserInfo(View):
    def get(self, request):
        return render(request, "user_info_card.html")

# Htmx Request 2
class GetUserProfile(View):
    def get(self, request):
        return render(request, "user_profile_card.html")

Issues with this approach:

  • Each Htmx request requires a separate URL.
  • Context is not shared across views, leading to code duplication.
  • Using Django's built-in ListView, duplicating logic for Htmx requests becomes a nightmare.

hx-requests: The Solution

hx-requests solves all of these issues. It allows multiple Htmx requests on the same page while sharing context across requests. Every Htmx request routes to an hx-request.

Advantages:

  • The parent view is not cluttered with extra logic for handling multiple Htmx requests.
  • HxRequests are reusable across views, reducing duplication.
  • No extra URLs are needed.
  • The view's context is shared across all Htmx requests, making it easier to manage.

Additionally, hx-requests includes built-in functionality to help with common Htmx use cases:

  • Form validation and automatic return of errors when using FormHxRequest.
  • Easy integration with Django's messages framework.
  • Compatibility with django-render-block for partial template rendering.
  • Built-in support for handling modals with Htmx.

Full documentation: hx-requests Documentation


Contributing to this repository

Getting setup

  • This project is using poetry
  • pre-commit is used for CI (code formatting, linting, etc...)
  • There is a dev container that can be used with vs-code

Committing

Must follow Conventional Commit

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

hx_requests-0.54.0.tar.gz (27.6 kB view details)

Uploaded Source

Built Distribution

If you're not sure about the file name format, learn more about wheel file names.

hx_requests-0.54.0-py3-none-any.whl (29.4 kB view details)

Uploaded Python 3

File details

Details for the file hx_requests-0.54.0.tar.gz.

File metadata

  • Download URL: hx_requests-0.54.0.tar.gz
  • Upload date:
  • Size: 27.6 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: poetry/1.8.5 CPython/3.8.18 Linux/6.17.0-1018-azure

File hashes

Hashes for hx_requests-0.54.0.tar.gz
Algorithm Hash digest
SHA256 5f5b2672f8d3157ebc2b4318309622ffae1e1cd7f492c78c92566b1717fda000
MD5 0f6f31a23abb5b592602ea3193f514f6
BLAKE2b-256 10f10fa31882dfb51b79a5b2d5aaddf8a1479f3038c50a284128bea95e4d3e4f

See more details on using hashes here.

File details

Details for the file hx_requests-0.54.0-py3-none-any.whl.

File metadata

  • Download URL: hx_requests-0.54.0-py3-none-any.whl
  • Upload date:
  • Size: 29.4 kB
  • Tags: Python 3
  • Uploaded using Trusted Publishing? No
  • Uploaded via: poetry/1.8.5 CPython/3.8.18 Linux/6.17.0-1018-azure

File hashes

Hashes for hx_requests-0.54.0-py3-none-any.whl
Algorithm Hash digest
SHA256 c3ad45272a6036f78d5a53f277549d260de078afb744060d64dc18a1605bc71a
MD5 ef24afed1ce327aa94b7402e0141f1d5
BLAKE2b-256 0f5bdc8633d5e0df82e94ce1a4193744be06f14cd4fe024a4c9357e1add1316d

See more details on using hashes here.

Release history Release notifications | RSS feed

0.56.0

2 files

0.55.0

2 files

This release

0.54.0 This release

2 files

0.53.0

2 files

0.52.1

2 files

0.52.0

2 files

0.51.0

2 files

0.50.0

2 files

0.49.0

2 files

0.48.1

2 files

0.48.0

2 files

0.47.0

2 files

0.46.0

2 files

0.45.0

2 files

0.44.0

2 files

0.43.0

2 files

0.42.0

2 files

0.41.0

2 files

0.40.1

2 files

0.40.0

2 files

0.39.0

2 files

0.38.2

2 files

0.38.1

2 files

0.38.0

2 files

0.37.2

2 files

0.37.1

2 files

0.37.0

2 files

0.36.2

2 files

0.36.1

2 files

0.36.0

2 files

0.35.5

2 files

0.35.4

2 files

0.35.3

2 files

0.35.2

2 files

0.35.1

2 files

0.35.0

2 files

0.34.0

2 files

0.33.2

2 files

0.33.1

2 files

0.33.0

2 files

0.32.1

2 files

0.32.0

2 files

0.31.1

2 files

0.31.0

2 files

0.29.3

2 files

0.29.2

2 files

0.29.1

2 files

0.29.0

2 files

0.28.1

2 files

0.28.0

2 files

0.27.2

2 files

0.27.1

2 files

0.27.0

2 files

0.26.2

2 files

0.26.1

2 files

0.26.0

2 files

0.25.0

2 files

0.24.0

2 files

0.23.1

2 files

0.23.0

2 files

0.22.0

2 files

0.21.0

2 files

0.20.4

2 files

0.20.3

2 files

0.20.2

2 files

0.20.1

2 files

0.20.0

2 files

0.19.0

2 files

0.18.4

2 files

0.18.3

2 files

0.18.2

2 files

0.18.1

2 files

0.18.0

2 files

0.16.1

2 files

0.16.0

2 files

0.15.1

2 files

0.15.0

2 files

0.14.3

2 files

0.14.2

2 files

0.14.1

2 files

0.14.0

2 files

0.13.2

2 files

0.13.1

2 files

0.13.0

2 files

0.12.0

2 files

0.11.2

2 files

0.11.1

2 files

0.11.0

2 files

0.10.2

2 files

0.10.1

2 files

0.10.0

2 files

0.9.0

2 files

0.8.0

2 files

0.7.2

2 files

0.7.1

2 files

0.7.0

2 files

0.6.2

2 files

0.6.1

2 files

0.6.0

2 files

0.5.3

2 files

0.5.2

2 files

0.5.1

2 files

0.5.0

2 files

0.4.6

2 files

0.4.5

2 files

0.4.4

2 files

0.4.3

2 files

0.4.2

2 files

0.4.1

2 files

0.4.0

2 files

0.3.0

2 files

0.2.3

2 files

0.2.2

2 files

0.2.1

2 files

0.2.0

2 files

0.1.2

2 files

0.1.1

2 files

0.1.0

2 files

Anthropic, PBC Visionary sponsor Bloomberg Visionary sponsor Hudson River Trading Visionary sponsor Meta Visionary sponsor NVIDIA Visionary sponsor Microsoft Sustainability sponsor Depot Continuous Integration AWS Cloud computing and Security Sponsor Datadog Monitoring Fastly CDN Google Download Analytics Sentry Error logging StatusPage Status page