HTMX And Django - Click to edit

Typically when you build a web application with Django, you need to refresh the browser everytime you want to do something.

With Htmx, you can click to edit text without refreshing the browser.

In this tutorial, we'll learn how to use Htmx with Django to create a text you can click to edit without refreshing the browser.

Let's say you have a Django project running. We can then begin by creating a view that shows an article:

def show(request, pk):
    article = Article.objects.get(pk=pk)
    return render(request, 'article/show.html', {'article': article})

With the view ready, we can create a template that displays the article:

{% extends 'core/base.html' %}

{% block content %}
    <div id="article">
        {% include 'article/partials/article.html' %}
    </div>
{% endblock %}

So instead of having all of the html here, I want to put the rendering part into a partial template. This makes it easier to re-use together with htmx.

The 'article.html' file can look like this:

<div hx-target="this" hx-swap="outerHTML">
    <h1>{{ article.title }}</h1>
    <p>{{ article.content }}</p>

    <button hx-get="/article/{{ article.pk }}/edit/">Edit</button>
</div>

This is not the most complicated template, it will just show the title and content of the article.

If you want, you can test this out in the browser. It will just show an article and nothing more.

Let's take it to the next step, and create a new partial file for the form. Create a new file called 'form.html' in the 'article/partials' folder.

The 'form.html' file can look like this:

<form hx-post="/article/{{ article.pk }}/edit/" hx-target="this" hx-swap="outerHTML">
    {% csrf_token %}
    <input type="text" name="title" placeholder="Title" value="{{ article.title }}" />
    <textarea name="content" placeholder="Content">{{ article.content }}</textarea>
    <button type="submit">Save</button>
</form>

And then, last but not least, we need a view to render the form and to handle the submission. Inside views.py, add the following view:

def edit(request, pk):
    article = Article.objects.get(pk=pk)

    if request.method == 'POST':
        article.title = request.POST['title']
        article.content = request.POST['content']
        article.save()
        return render(request, 'article/partials/article.html', {'article': article})

    return render(request, 'article/partials/form.html', {'article': article})

Btw, this is not best practice when it comes to handling forms in Django. This is just for showing how it _can_ be done. You should always be using the build in form functionality in Django.

Now, if you test this out in the browser, you should be able to click the 'Edit' button and see the form.

And if you fill in the form and submit it, the article should be updated, and the article details should be shown again with the updated values.