Django and HTMX - A Lovely Couple

Django is a popular Python web framework that follows the model-template-view (MVT) architectural pattern. It provides a powerful and flexible way to build web applications, with features like URL routing, database integration, and a templating engine.

htmx is a library that allows you to add dynamic behavior to your web pages using HTML attributes. It enables you to update parts of a web page without having to refresh the entire page or write a lot of JavaScript code. It works by sending small, targeted requests to the server and updating only the relevant parts of the page with the server's response.

Django and htmx can work together to create highly dynamic and interactive web applications. htmx can be used to add dynamic behavior to Django's HTML templates, such as updating a list of items without refreshing the page, or adding a new item to a form without having to navigate away from the page.

One popular htmx feature is its ability to easily handle form submissions with minimal JavaScript code. With htmx, you can submit a form using an HTTP request, and the server can return a partial HTML response that updates only the relevant parts of the page.

Setup

1. Include HTMX CDN in Django template.

    <script src="https://cdnjs.cloudflare.com/ajax/libs/htmx/1.8.6/htmx.min.js" integrity="sha512-SqV24lSRcthd1Bg0Obg/W/qWhKdSsQPIV342MQd8qDeeY/gJt+2qmsLhutblQNDuUx0Xs2Jh7D8m+7S1b0wQyA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
   

2. Install django-htmx for better handling of HTMX requests.

    pip install django-htmx
   

3. Next, you need to add 'django_htmx' to your INSTALLED_APPS list in your Django project's settings.py file:

    INSTALLED_APPS = [
        # ... other apps ...
        'django_htmx',
    ]
   

4. Include django_htmx.middleware.HtmxMiddleware in MIDDLEWARE list in your Django project's settings.py file.

    MIDDLEWARE = [
        # ... other middlewares ...
        "django_htmx.middleware.HtmxMiddleware",
    ]
   

5. Also, include {% django_htmx_script %} in django template.

    {% django_htmx_script %}
   

Now you're ready to use HTMX in templates.

Form submission

To submit a form using Django and htmx, you can follow these steps:

1. Add the hx-post attribute to the <form> tag in your HTML template. This will tell htmx to submit the form using an AJAX request instead of a full page reload. You can also add the hx-target attribute to specify where the server response should be inserted. For example:

    <form action="{% url 'my_view' %}" method="POST" hx-post hx-target="#form-container">
        {% csrf_token %}
        <!-- form fields go here -->
        <button type="submit">Submit</button>
    </form>
    <div id="form-container">
        <!-- server response will be inserted here -->
    </div>
   

2. In your Django view function, you can check if the request method is POST and handle the form submission accordingly. You can use the render function to render a template with the server response. For example:

    from django.shortcuts import render
   
    def my_view(request):
        if request.method == 'POST':
            # handle form submission
            # ...
            # render the response
            return render(request, 'response_template.html',    {'message': 'Form submitted successfully!'})
        else:
            # render the form
            return render(request, 'form_template.html')
   

3. Create a new HTML template for the server response, and include the response message or data. For example:

    <p>{{ message }}</p>
   

That's it! When the user submits the form, htmx will send an AJAX request to your Django view function, and the server response will be inserted into the specified target element without a full page reload.