From 72888d68b621b6c2288d1eb043b2b3768eb52c02 Mon Sep 17 00:00:00 2001
From: Horilla <support@horilla.com>
Date: Sat, 2 Aug 2025 12:21:28 +0530
Subject: [PATCH] [UPDT] HORILLA_VIEWS: Updated HorillaFormView class
 get_context_data function by adding hx_target in context

---
 horilla_views/generic/cbv/views.py            |   1 +
 .../templates/generic/horilla_form.html       | 146 +++++++++---------
 2 files changed, 71 insertions(+), 76 deletions(-)

diff --git a/horilla_views/generic/cbv/views.py b/horilla_views/generic/cbv/views.py
index 225ed2c75..5b7053c2d 100644
--- a/horilla_views/generic/cbv/views.py
+++ b/horilla_views/generic/cbv/views.py
@@ -1898,6 +1898,7 @@ class HorillaFormView(FormView):
         context["form_class_path"] = self.form_class_path
         context["view_id"] = self.view_id
         context["hx_confirm"] = self.hx_confirm
+        context["hx_target"] = self.request.META.get("HTTP_HX_TARGET", "this")
         pk = None
         if self.form.instance:
             pk = self.form.instance.pk
diff --git a/horilla_views/templates/generic/horilla_form.html b/horilla_views/templates/generic/horilla_form.html
index 1c921f97f..c39f9e47b 100644
--- a/horilla_views/templates/generic/horilla_form.html
+++ b/horilla_views/templates/generic/horilla_form.html
@@ -1,80 +1,74 @@
 {% load generic_template_filters %}
-<div id="{{view_id}}">
-  {% for field_tuple in dynamic_create_fields %}
-  <div
-    class="oh-modal"
-    id="dynamicModal{{field_tuple.0}}"
-    role="dialog"
-    aria-labelledby="dynamicModal{{field_tuple.0}}"
-    aria-hidden="true"
-  >
-    <div
-      class="oh-modal__dialog"
-      id="dynamicModal{{field_tuple.0}}Body"
-    ></div>
-  </div>
-  </div>
-  {% endfor %}
-  <form id="{{view_id}}Form" hx-post="{{request.path}}?{{request.GET.urlencode}}" hx-encoding="multipart/form-data" hx-swap="outerHTML" {% if hx_confirm %} hx-confirm="{{hx_confirm}}" {% endif %}>{{form.structured}}</form>
-  {% for field_tuple in dynamic_create_fields %}
-  <div >
-  <script class="dynamic_{{field_tuple.0}}_scripts">
-    {{form.initial|get_item:field_tuple.0}}
-    $("#{{view_id}}Form [name={{field_tuple.0}}]").val({{form.initial|get_item:field_tuple.0|safe}}).change()
-  </script>
 
-  <form
-    hidden
-    id="modalButton{{field_tuple.0}}Form"
-    hx-get="/dynamic-path-{{field_tuple.0}}-{{request.session.session_key}}?dynamic_field={{field_tuple.0}}"
-    hx-target="#dynamicModal{{field_tuple.0}}Body"
-  >
-    <input type="text" name="dynamic_initial" data-dynamic-field="{{field_tuple.0}}">
-    <input type="text" name="view_id" value="{{view_id}}">
-    {% for field in field_tuple.2 %}
-    <input type="text" name="{{field}}">
+<div id="{{ view_id }}">
+    {% for field_tuple in dynamic_create_fields %}
+        <div class="oh-modal" id="dynamicModal{{ field_tuple.0 }}" role="dialog"
+            aria-labelledby="dynamicModal{{ field_tuple.0 }}" aria-hidden="true">
+            <div class="oh-modal__dialog" id="dynamicModal{{ field_tuple.0 }}Body"></div>
+        </div>
     {% endfor %}
-    <button
-      type="submit"
-      id="modalButton{{field_tuple.0}}"
-      onclick="$('#dynamicModal{{field_tuple.0}}').addClass('oh-modal--show');"
-    >
-    {{field_tuple.0}}
-    </button>
-  </form>
-  <form hidden id="reload-field{{field_tuple.0}}{{view_id}}"  hx-get="{% url "reload-field" %}?form_class_path={{form_class_path}}&dynamic_field={{field_tuple.0}}" hx-target="#dynamic_field_{{field_tuple.0}}">
-    <input type="text" name="dynamic_initial" data-dynamic-field="{{field_tuple.0}}">
-    <input type="text" name="view_id" value="{{view_id}}">
-    <button class="reload-field" data-target="{{field_tuple.0}}">
-      {{field_tuple.0}}
-    </button>
-  </form>
-  <script class="dynamic_{{field_tuple.0}}_scripts">
-    $("#{{view_id}}Form [name={{field_tuple.0}}]").change(function (e) {
-      values = $(this).val();
-      if (!values) {
-        values = ""
-      }
-      if (values == "dynamic_create") {
-        $("#modalButton{{field_tuple.0}}").click()
-        $(this).val("")
-      }else if (values.includes("dynamic_create")) {
-        let index = values.indexOf("dynamic_create");
-        values.splice(index, 1);
-        $(this).val(values).change();
-        $("#modalButton{{field_tuple.0}}").parent().find('input[name=dynamic_initial]').val(values)
-        $("#reload-field{{field_tuple.0}}{{view_id}}").find('input[name=dynamic_initial]').val(values)
-        $("#modalButton{{field_tuple.0}}").click()
-      }else if(values) {
-        $("#modalButton{{field_tuple.0}}").parent().find('input[name=dynamic_initial]').val(values)
-        $("#reload-field{{field_tuple.0}}{{view_id}}").find('input[name=dynamic_initial]').val(values)
-      }
-    });
-    $("#reload-field{{field_tuple.0}}{{view_id}}").submit(function (e) {
-      e.preventDefault();
-      $(this).find("[name=dynamic_initial]").val();
-    });
-  </script>
-  </div>
-  {% endfor %}
 </div>
+
+<form id="{{ view_id }}Form" hx-post="{{ request.path }}?{{ request.GET.urlencode }}" hx-target="#{{ hx_target }}"
+    hx-swap="{% if hx_target == 'this' %}outerHTML{% else %}innerHTML{% endif %}" hx-encoding="multipart/form-data"
+    {% if hx_confirm %} hx-confirm="{{ hx_confirm }}" {% endif %}>
+    {{ form.structured }}
+</form>
+
+{% for field_tuple in dynamic_create_fields %}
+    <div>
+        <script class="dynamic_{{ field_tuple.0 }}_scripts">
+            {{ form.initial|get_item:field_tuple.0 }}
+            $("#{{ view_id }}Form [name={{ field_tuple.0 }}]").val({{ form.initial|get_item:field_tuple.0|safe }}).change()
+        </script>
+
+        <form hidden id="modalButton{{ field_tuple.0 }}Form"
+            hx-get="/dynamic-path-{{ field_tuple.0 }}-{{ request.session.session_key }}?dynamic_field={{ field_tuple.0 }}"
+            hx-target="#dynamicModal{{ field_tuple.0 }}Body">
+            <input type="text" name="dynamic_initial" data-dynamic-field="{{ field_tuple.0 }}">
+            <input type="text" name="view_id" value="{{ view_id }}">
+            {% for field in field_tuple.2 %}
+                <input type="text" name="{{ field }}">
+            {% endfor %}
+            <button type="submit" id="modalButton{{ field_tuple.0 }}"
+                onclick="$('#dynamicModal{{ field_tuple.0 }}').addClass('oh-modal--show');">
+                {{ field_tuple.0 }}
+            </button>
+        </form>
+        <form hidden id="reload-field{{ field_tuple.0 }}{{ view_id }}"
+            hx-get="{% url 'reload-field' %}?form_class_path={{ form_class_path }}&dynamic_field={{ field_tuple.0 }}"
+            hx-target="#dynamic_field_{{ field_tuple.0 }}">
+            <input type="text" name="dynamic_initial" data-dynamic-field="{{ field_tuple.0 }}">
+            <input type="text" name="view_id" value="{{ view_id }}">
+            <button class="reload-field" data-target="{{ field_tuple.0 }}">
+                {{ field_tuple.0 }}
+            </button>
+        </form>
+        <script class="dynamic_{{ field_tuple.0 }}_scripts">
+            $("#{{ view_id }}Form [name={{ field_tuple.0 }}]").change(function (e) {
+                values = $(this).val();
+                if (!values) {
+                    values = ""
+                }
+                if (values == "dynamic_create") {
+                    $("#modalButton{{ field_tuple.0 }}").click()
+                    $(this).val("")
+                } else if (values.includes("dynamic_create")) {
+                    let index = values.indexOf("dynamic_create");
+                    values.splice(index, 1);
+                    $(this).val(values).change();
+                    $("#modalButton{{ field_tuple.0 }}").parent().find('input[name=dynamic_initial]').val(values)
+                    $("#reload-field{{ field_tuple.0 }}{{ view_id }}").find('input[name=dynamic_initial]').val(values)
+                    $("#modalButton{{ field_tuple.0 }}").click()
+                } else if (values) {
+                    $("#modalButton{{ field_tuple.0 }}").parent().find('input[name=dynamic_initial]').val(values)
+                    $("#reload-field{{ field_tuple.0 }}{{ view_id }}").find('input[name=dynamic_initial]').val(values)
+                }
+            });
+            $("#reload-field{{ field_tuple.0 }}{{ view_id }}").submit(function (e) {
+                e.preventDefault();
+                $(this).find("[name=dynamic_initial]").val();
+            });
+        </script>
+    </div>
+{% endfor %}