Creating a To-Do app with Django and HTMX, part 4: adding new Todos

Now that we've added the ability to toggle todo items on and off on Part 3, let's add a form to create new Todo items, using HTMX and a route that accepts POST requests.

It's going to look like this:

Extending the view to accept POST requests

To create new posts, we have two common options for the POST route: one is to have a separate route, such as /tasks/create, and the other is to use the same route we already have to list the tasks, /tasks. We'll opt for the latter, is it adheres best to REST and hypermedia practices, but both are fine.

Since the URL is already defined we just need to change the tasks view in core/views.py. To keep the code cleaner, we'll keep the code that handles POST requests on a separate function.

def _create_todo(request):  # <-- NEW
    title = request.POST.get("title")
    if not title:
        raise ValueError("Title is required")

    todo = Todo.objects.create(title=title, user=request.user)
    return render(request, "tasks.html#todo-item-partial", {"todo": todo})


@require_http_methods(["GET", "POST"])  # <-- NEW
@login_required
def tasks(request):
    if request.method == "POST":  # <-- NEW
        return _create_todo(request)

    context = {
        "todos": get_user_todos(request.user),
        "fullname": request.user.get_full_name() or request.user.username,
    }

    return render(request, "tasks.html", context)

On templates/tasks.html we will add a new form

<!-- core/templates/tasks.html -->

{% extends "_base.html" %}
{% load partials %}

{% block content %}
<div class="flex flex-col items-center mx-10 md:mx-20">
  <h1 class="text-2xl font-bold m-4">{{ fullname }}'s Tasks</h1>

  <div class="w-full max-w-2xl">
    <!-- NEW -->
    <div class="mb-4">
      <form hx-post="{% url 'tasks' %}" 
        hx-swap="beforeend" 
        hx-target="#todo-items" 
        hx-on::after-request="this.reset()"
        class="flex items-center space-x-2">
        <input type="text" required name="title" placeholder="Add a new todo" class="input input-bordered flex-1 text-lg" />
        <button type="submit" class="btn btn-primary btn-info text-lg w-24">Add</button>
      </form>
    </div>
    <!-- END OF NEW CODE -->

    <ul id="todo-items" class="list bg-base-100 rounded-box shadow-md">
      {% for todo in todos %}
      {% partialdef todo-item-partial inline %}
      <li class="list-row">
        <input type="checkbox"
          hx-put="{% url 'toggle_todo' todo.id %}"
          hx-swap="outerHTML"
          hx-target="closest li" 
          {% if todo.is_completed %}checked{% endif %} class="checkbox checkbox-lg checkbox-info mr-4" />
            <span class="flex-1 text-lg {% if todo.is_completed %}text-gray-500{% endif %}">{{ todo.title }}</span>
      </li>
      {% endpartialdef %} 
      {% endfor %}
    </ul>
  </div>
</div>
{% endblock %}

All the interesting code is in the form tag:

• hx-post="{% url 'tasks' %}" indicates that the form will make a POST request to the tasks url;
• hx-swap="beforeend" and hx-target="#todo-items" work together; it sets the target of the response to be the #todo-items tag (the ul), and that it should add the new fragment before the end of the list. If we wanted to add new items at the top, we could use afterbegin instead.
• hx-on::after-request="this.reset()" will reset the form (clean the input text) after the request is sent; this will allow us to add several tasks at once, by typing and pressing "Enter" to submit the form.

Let's see it in action!

Dealing with slow requests

Now that we can add new items , let's handle with a common UX issue: latency. While our tests on localhost are pretty fast, in the real world the requests to create and toggle todo items may take a second or two, and the user may be unsure what's going on.

For the submit button, we'll make use of the hx-disable-elt attribute, and set it to the submit button, in tasks.html`

jinja
<form hx-post="{% url 'tasks' %}"
hx-swap="beforeend"
hx-target="#todo-items"
hx-on::after-request="this.reset();"
hx-disabled-elt="#submit" <!-- NEW -->
class="flex items-center space-x-2">
<input type="text" required name="title" placeholder="Add a new todo" class="input input-bordered flex-1 text-lg" />
<button id="submit" type="submit" class="btn btn-primary btn-info text-lg w-24">Add</button>
</form>


For the toggle function, we can disable the checkbox during the request using hx-on:click

`jinja

  <li class="list-row">
    <input type="checkbox"
      hx-put="{% url 'toggle_todo' todo.id %}"
      hx-swap="outerHTML"
      hx-target="closest li" 
      hx-on:click="this.setAttribute('disabled', 'disabled')" <!-- NEW-->
      {% if todo.is_completed %}checked{% endif %} class="checkbox checkbox-lg checkbox-info mr-4" />
        <span class="flex-1 text-lg {% if todo.is_completed %}text-gray-500{% endif %}">{{ todo.title }}</span>
  </li>

`

We can force the requests to be slow by opening developer tools/network and setting the Throttling option to 3G (in Firefox you can choose even slower options)

Let's check how it goes:

We're done by now! In part 5, we'll add some tests to our views, which is probably a much nicer experience than testing client-side code :)

As usual you can check the code written in Part 4 in its branch in Github.