HTMX with Django Example 1 Click to Edit

Source :

HTMX click-editing

The click to edit pattern provides a way to offer inline editing of all or part of a record without a page refresh.

This pattern starts with a UI that shows the details of a contact.

The div has a button that will get the editing UI for the contact from /contacts/1/edit 

1 <div hx-target="this" hx-swap="outerHTML">
2     <div><label>First Name</label>: Joe</div>
3     <div><label>Last Name</label>: Blow</div>
4     <div><label>Email</label>: joe@blow.com</div>
5     <button hx-get="/contact/1/edit" class="btn btn-primary">
6     Click To Edit
7     </button>
8 </div>

This returns a form that can be used to edit the contact 

<form hx-put="/contact/1" hx-target="this" hx-swap="outerHTML">
  <div>
    <label>First Name</label>
    <input type="text" name="firstName" value="Joe">
  </div>
  <div class="form-group">
    <label>Last Name</label>
    <input type="text" name="lastName" value="Blow">
  </div>
  <div class="form-group">
    <label>Email Address</label>
    <input type="email" name="email" value="joe@blow.com">
  </div>
  <button class="btn">Submit</button>
  <button class="btn" hx-get="/contact/1">Cancel</button>
</form>

The form issues a PUT back to /contacts/1, following the usual REST-ful pattern .

Django HTMX Click To Edit

The click to edit pattern provides a way to offer inline editing of all or part of a record without a page refresh.

../../../../_images/click_edit_init.png

click_to_edit/templates/click_to_edit/initial_state.html 

 1 {% extends "base.html" %}
 2
 3 {% block content %}
 4     <div hx-target="this" hx-swap="outerHTML">
 5         {% if contact %}
 6             <div class="bg-white shadow overflow-hidden sm:rounded-lg">
 7                 <div class="px-4 py-5 sm:px-6">
 8                     <h3 class="text-lg leading-6 font-medium text-gray-900">
 9                         Click To Update Person
10                     </h3>
11                     <p class="mt-1 max-w-2xl text-sm text-gray-500">
12                         <a class="font-medium text-indigo-600 hover:text-indigo-500" href="https://htmx.org/examples/click-to-edit/">HTMX example here</a>
13                     </p>
14                 </div>
15                 <div class="border-t border-gray-200">
16                     <dl>
17                         <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
18                             <dt class="text-sm font-medium text-gray-500 ">
19                                 First Name
20                             </dt>
21                             <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
22                                 {{contact.first_name}}
23                             </dd>
24                         </div>
25                         <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
26                             <dt class="text-sm font-medium text-gray-500">
27                                 Last Name
28                             </dt>
29                             <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
30                                 {{contact.last_name}}
31                             </dd>
32                         </div>
33                         <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
34                             <dt class="text-sm font-medium text-gray-500">
35                                 Email address
36                             </dt>
37                             <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
38                                 {{contact.email_address}}
39                             </dd>
40                         </div>
41                     </dl>
42                 </div>
43             </div>
44             <button hx-get="{% url 'click_to_edit:contact_view_update' contact_id=contact.id %}" type="button"
45                 class="ml-2 inline-flex mt-10 items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
46                 Click To Update
47             </button>
48         {% else %}
49             <div class="bg-white shadow overflow-hidden sm:rounded-lg">
50
51                 <div class="px-4 py-5 sm:px-6">
52                     <h3 class="text-lg leading-6 font-medium text-gray-900">
53                         You dont have a Contact , please add one in the admin!
54                     </h3>
55                 </div></div>
56         {% endif %}
57     </div>
58
59 {% endblock content %}