Closes #11625: Add HTMX support to ObjectEditView

Author: jeremystretch

docs/release-notes/version-3.5.md

@@ -4,10 +4,11 @@
 
 ### Enhancements
 
-* [#11517](https://github.com/netbox-community/netbox/issues/11517) - Standardize the inclusion of related objects across the entire UI
-* [#11584](https://github.com/netbox-community/netbox/issues/11584) - Add a list view for contact assignments
 * [#11254](https://github.com/netbox-community/netbox/issues/11254) - Introduce the `X-Request-ID` HTTP header to annotate the unique ID of each request for change logging
 * [#11440](https://github.com/netbox-community/netbox/issues/11440) - Add an `enabled` field for device type interfaces
+* [#11517](https://github.com/netbox-community/netbox/issues/11517) - Standardize the inclusion of related objects across the entire UI
+* [#11584](https://github.com/netbox-community/netbox/issues/11584) - Add a list view for contact assignments
+* [#11625](https://github.com/netbox-community/netbox/issues/11625) - Add HTMX support to ObjectEditView
 
 ### Other Changes
 

netbox/netbox/views/generic/object_views.py

@@ -218,6 +218,12 @@ def get(self, request, *args, **kwargs):
         form = self.form(instance=obj, initial=initial_data)
         restrict_form_fields(form, request.user)
 
+        # If this is an HTMX request, return only the rendered form HTML
+        if is_htmx(request):
+            return render(request, 'htmx/form.html', {
+                'form': form,
+            })
+
         return render(request, self.template_name, {
             'model': model,
             'object': obj,

netbox/templates/generic/object_edit.html

@@ -1,6 +1,4 @@
 {% extends 'base/layout.html' %}
-{% load form_helpers %}
-{% load helpers %}
 
 {% comment %}
 Blocks:
@@ -48,56 +46,11 @@
       <form action="" method="post" enctype="multipart/form-data" class="form-object-edit mt-5">
         {% csrf_token %}
 
-        {% block form %}
-          {% if form.fieldsets %}
-
-            {# Render hidden fields #}
-            {% for field in form.hidden_fields %}
-              {{ field }}
-            {% endfor %}
-
-            {# Render grouped fields according to Form #}
-            {% for group, fields in form.fieldsets %}
-              <div class="field-group mb-5">
-                {% if group %}
-                  <div class="row mb-2">
-                    <h5 class="offset-sm-3">{{ group }}</h5>
-                  </div>
-                {% endif %}
-                {% for name in fields %}
-                  {% with field=form|getfield:name %}
-                    {% if not field.field.widget.is_hidden %}
-                      {% render_field field %}
-                    {% endif %}
-                  {% endwith %}
-                {% endfor %}
-              </div>
-            {% endfor %}
-
-            {% if form.custom_fields %}
-              <div class="field-group mb-5">
-                <div class="row mb-2">
-                  <h5 class="offset-sm-3">Custom Fields</h5>
-                </div>
-                {% render_custom_fields form %}
-              </div>
-            {% endif %}
-
-            {% if form.comments %}
-              <div class="field-group mb-5">
-                <h5 class="text-center">Comments</h5>
-                {% render_field form.comments %}
-              </div>
-            {% endif %}
-
-          {% else %}
-            {# Render all fields in a single group #}
-            <div class="field-group mb-5">
-              {% render_form form %}
-            </div>
-          {% endif %}
-
-        {% endblock form %}
+        <div id="form_fields">
+          {% block form %}
+            {% include 'htmx/form.html' %}
+          {% endblock form %}
+        </div>
 
         <div class="text-end my-3">
           {% block buttons %}

netbox/templates/htmx/form.html

@@ -0,0 +1,51 @@
+{% load form_helpers %}
+
+{% if form.fieldsets %}
+
+  {# Render hidden fields #}
+  {% for field in form.hidden_fields %}
+    {{ field }}
+  {% endfor %}
+
+  {# Render grouped fields according to Form #}
+  {% for group, fields in form.fieldsets %}
+    <div class="field-group mb-5">
+      {% if group %}
+        <div class="row mb-2">
+          <h5 class="offset-sm-3">{{ group }}</h5>
+        </div>
+      {% endif %}
+      {% for name in fields %}
+        {% with field=form|getfield:name %}
+          {% if not field.field.widget.is_hidden %}
+            {% render_field field %}
+          {% endif %}
+        {% endwith %}
+      {% endfor %}
+    </div>
+  {% endfor %}
+
+  {% if form.custom_fields %}
+    <div class="field-group mb-5">
+      <div class="row mb-2">
+        <h5 class="offset-sm-3">Custom Fields</h5>
+      </div>
+      {% render_custom_fields form %}
+    </div>
+  {% endif %}
+
+  {% if form.comments %}
+    <div class="field-group mb-5">
+      <h5 class="text-center">Comments</h5>
+      {% render_field form.comments %}
+    </div>
+  {% endif %}
+
+{% else %}
+
+  {# Render all fields in a single group #}
+  <div class="field-group mb-5">
+    {% render_form form %}
+  </div>
+
+{% endif %}