Creating a To-Do app with Django and HTMX - Part 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>



<p>All the interesting code is in the form tag:</p>

<ul>
<li>
hx-post="{% url 'tasks' %}" indicates that the form will make a POST request to the tasks url;</li>
<li>
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.</li>
<li>
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.</li>
</ul>

<p>Let's see it in action!</p>

<p><img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173595748091013.jpg"  class="lazy" alt="Creating a To-Do app with Django and HTMX - Part adding new Todos" /></p>

<h2>
  
  
  Dealing with slow requests
</h2>

<p>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.</p>

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

<p>jinja<br>
      <form hx-post="{% url 'tasks' %}" <br>
        hx-swap="beforeend" <br>
        hx-target="#todo-items" <br>
        hx-on::after-request="this.reset();"<br>
        hx-disabled-elt="#submit" <!-- NEW --><br>
       >
        <input type="text" required name="title" placeholder="Add a new todo" class="input input-bordered flex-1 text-lg" /><br>
        <button>
      </form><br>
<p>For the toggle function, we can disable the checkbox during the request using hx-on:click</p>

<p>`jinja</p>

<pre class="brush:php;toolbar:false">  <li>

<p>`</p>

<p>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)</p>

<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173595748646074.jpg" class="lazy" alt="Creating a To-Do app with Django and HTMX - Part adding new Todos"></p>

<p>Let's check how it goes:</p>

<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173595748873709.jpg" class="lazy" alt="Creating a To-Do app with Django and HTMX - Part adding new Todos"></p>

<p>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 :)</p>


          

            
        

The above is the detailed content of Creating a To-Do app with Django and HTMX - Part adding new Todos. For more information, please follow other related articles on the PHP Chinese website!