[UPDT] STATIC: Updated country.js file

base/templates/multi_approval_condition/condition_edit_form.html

@@ -174,10 +174,3 @@
     </div>
   </form>
 </div>
-<script>
-  $(document).ready(function () {
-    $("select").on("select2:select", function (e) {
-      $(this).closest("select")[0].dispatchEvent(new Event("change"));
-    });
-  });
-</script>

dynamic_fields/templates/dynamic_fields/common/form.html

@@ -83,11 +83,3 @@
     </div>
   </div>
 </div>
-<script>
-  $(document).ready(function () {
-      $("select").on("select2:select", function (e) {
-         $(".leave-message").hide();
-          $(this).closest("select")[0].dispatchEvent(new Event("change"));
-      });
-  });
-</script>

horilla_views/templates/generic/form.html

@@ -1,93 +1,81 @@
 {% load widget_tweaks %} {% load i18n %}
 {% load generic_template_filters %}
 <style>
-  .condition-highlight {
-    background-color: #ffa5000f;
-  }
+    .condition-highlight {
+        background-color: #ffa5000f;
+    }
 </style>
+
 {% if form.verbose_name %}
-<div class="oh-modal__dialog-header">
-  <h2 class="oh-modal__dialog-title" id="createTitle">
-  {{form.verbose_name}}
-  </h2>
-  <button type="button" class="oh-modal__close--custom" onclick="$(this).closest('.oh-modal--show').removeClass('oh-modal--show')" aria-label="Close" {{form.close_button_attrs|safe}}>
-      <ion-icon name="close-outline" role="img" class="md hydrated" aria-label="close outline"></ion-icon>
-  </button>
-</div>
-{% endif %}
-<div class="oh-modal__dialog-body oh-modal__dialog-relative">
-  {% if form.instance_ids %}
-  <div class="oh-modal__dialog oh-modal__dialog--navigation m-0 p-0">
-    <button
-      hx-get="{{form.previous_url}}?{{form.ids_key}}={{form.instance_id}}&{{request.GET.urlencode}}"
-      hx-swap="innerHTML"
-      hx-target="#genericModalBody"
-      class="oh-modal__diaglog-nav oh-modal__nav-prev"
-    >
-      <ion-icon name="chevron-back-outline"></ion-icon>
-    </button>
-
-    <button
-      hx-get="{{form.next_url}}?{{form.ids_key}}={{form.instance_id}}&{{request.GET.urlencode}}"
-      hx-swap="innerHTML"
-      hx-target="#genericModalBody"
-      class="oh-modal__diaglog-nav oh-modal__nav-next"
-    >
-      <ion-icon name="chevron-forward-outline"></ion-icon>
-    </button>
-  </div>
-  {% endif %}
-  <div class="oh-general__tab-target oh-profile-section" id="{{form.container_id}}">
-    <div class="oh-profile-section__card row">
-      <div class="row" style="padding-right: 0;">
-        <div class="col-12" style="padding-right: 0;">{{ form.non_field_errors }}</div>
-        {% for field in form.visible_fields %}
-        <div class="col-12 col-md-{{field|col}}" id="id_{{ field.name }}_parent_div" style="padding-right: 0;">
-          <div class="oh-label__info" for="id_{{ field.name }}">
-            <label class="oh-label {% if field.field.required %} required-star{% endif %}" for="id_{{ field.name }}"
-              >{% trans field.label %}</label
-            >
-            {% if field.help_text != '' %}
-            <span
-              class="oh-info mr-2"
-              title="{{ field.help_text|safe }}"
-            ></span>
-            {% endif %}
-          </div>
-
-          {% if field.field.widget.input_type == 'checkbox' %}
-          <div class="oh-switch" style="width: 30px">
-            {{ field|add_class:'oh-switch__checkbox' }}
-          </div>
-          {% else %}
-          <div id="dynamic_field_{{field.name}}">
-            {{ field|add_class:'form-control' }}
-            {{ field.errors }}
-          </div>
-          {% endif %}
-        </div>
-        {% endfor %}
-      </div>
-
-      {% for field in form.hidden_fields %} {{ field }} {% endfor %}
-
-      <div class="d-flex flex-row-reverse">
-        <button
-          type="submit"
-          class="oh-btn oh-btn--secondary mt-2 mr-0 pl-4 pr-5 oh-btn--w-100-resp"
-          {{form.submit_button_attrs|safe}}
-        >
-          {% trans 'Save' %}
+    <div class="oh-modal__dialog-header">
+        <h2 class="oh-modal__dialog-title" id="createTitle">
+            {{form.verbose_name}}
+        </h2>
+        <button type="button" class="oh-modal__close--custom"
+            onclick="$(this).closest('.oh-modal--show').removeClass('oh-modal--show')" aria-label="Close"
+            {{form.close_button_attrs|safe}}>
+            <ion-icon name="close-outline" role="img" class="md hydrated" aria-label="close outline"></ion-icon>
         </button>
-      </div>
     </div>
-  </div>
+{% endif %}
+
+<div class="oh-modal__dialog-body oh-modal__dialog-relative">
+    {% if form.instance_ids %}
+        <div class="oh-modal__dialog oh-modal__dialog--navigation m-0 p-0">
+            <button hx-get="{{form.previous_url}}?{{form.ids_key}}={{form.instance_id}}&{{request.GET.urlencode}}"
+                hx-swap="innerHTML" hx-target="#genericModalBody" class="oh-modal__diaglog-nav oh-modal__nav-prev">
+                <ion-icon name="chevron-back-outline"></ion-icon>
+            </button>
+
+            <button hx-get="{{form.next_url}}?{{form.ids_key}}={{form.instance_id}}&{{request.GET.urlencode}}"
+                hx-swap="innerHTML" hx-target="#genericModalBody" class="oh-modal__diaglog-nav oh-modal__nav-next">
+                <ion-icon name="chevron-forward-outline"></ion-icon>
+            </button>
+        </div>
+    {% endif %}
+    <div class="oh-general__tab-target oh-profile-section" id="{{form.container_id}}">
+        <div class="oh-profile-section__card row">
+            <div class="row" style="padding-right: 0;">
+                <div class="col-12" style="padding-right: 0;">{{ form.non_field_errors }}</div>
+                {% for field in form.visible_fields %}
+                    <div class="col-12 col-md-{{field|col}}" id="id_{{ field.name }}_parent_div" style="padding-right: 0;">
+                        <div class="oh-label__info" for="id_{{ field.name }}">
+                            <label class="oh-label {% if field.field.required %} required-star{% endif %}"
+                                for="id_{{ field.name }}">{% trans field.label %}</label>
+                            {% if field.help_text != '' %}
+                                <span class="oh-info mr-2" title="{{ field.help_text|safe }}"></span>
+                            {% endif %}
+                        </div>
+
+                        {% if field.field.widget.input_type == 'checkbox' %}
+                            <div class="oh-switch" style="width: 30px">
+                                {{ field|add_class:'oh-switch__checkbox' }}
+                            </div>
+                        {% elif field.name == "country" or field.name == "state" %}
+                            <div class="oh-input-group mb-2">
+                                <select name="{{ field.name }}" id="{{ field.id_for_label }}" class="oh-select oh-select-2 form-control"
+                                    data-selected="{{ field.value|default:'' }}">
+                                </select>
+                                {{ field.errors }}
+                            </div>
+                        {% else %}
+                            <div id="dynamic_field_{{field.name}}">
+                                {{ field|add_class:'form-control' }}
+                                {{ field.errors }}
+                            </div>
+                        {% endif %}
+                    </div>
+                {% endfor %}
+            </div>
+
+            {% for field in form.hidden_fields %} {{ field }} {% endfor %}
+
+            <div class="d-flex flex-row-reverse">
+                <button type="submit" class="oh-btn oh-btn--secondary mt-2 mr-0 pl-4 pr-5 oh-btn--w-100-resp"
+                    {{form.submit_button_attrs|safe}}>
+                    {% trans 'Save' %}
+                </button>
+            </div>
+        </div>
+    </div>
 </div>
-<script>
-  $(document).ready(function () {
-      $("select").on("select2:select", function (e) {
-         $(".leave-message").hide();
-          $(this).closest("select")[0].dispatchEvent(new Event("change"));
-      });
-  });
-</script>

static/index/country.js

@@ -687,52 +687,56 @@ s_a[252] =
     "Bulawayo|Harare|ManicalandMashonaland Central|Mashonaland East|Mashonaland West|Masvingo|Matabeleland North|Matabeleland South|Midlands";
 
 function populateStates(countryElementId, stateElementId) {
-    var selectedCountryIndex = document.getElementById(countryElementId).selectedIndex;
-    var stateElement = document.getElementById(stateElementId);
-    var selectedState = stateElement?.dataset.selected;
+    var countryEl = document.getElementById(countryElementId);
+    var stateEl = document.getElementById(stateElementId);
 
-    stateElement.length = 0;
-    stateElement.options[0] = new Option("Select State", "");
-    stateElement.selectedIndex = 0;
+    if (!countryEl || !stateEl) return;  // Prevents null access
+    var selectedCountryIndex = countryEl.selectedIndex;
+    var selectedState = stateEl.getAttribute('data-selected') || '';
+
+    stateEl.length = 0;
+    stateEl.options[0] = new Option("Select State", "");
+    stateEl.selectedIndex = 0;
 
     if (s_a[selectedCountryIndex]) {
-        state_arr = s_a[selectedCountryIndex].split("|");
+        var state_arr = s_a[selectedCountryIndex].split("|");
         for (var i = 0; i < state_arr.length; i++) {
             let stateValue = state_arr[i].replace(/'/g, '`');
             let option = new Option(state_arr[i], stateValue);
             if (selectedState && selectedState === stateValue) {
                 option.selected = true;
             }
-            stateElement.options[stateElement.length] = option;
+            stateEl.options[stateEl.length] = option;
         }
     }
 }
 
 
 function populateCountries(countryElementId, stateElementId) {
-    var countryElement = document.getElementById(countryElementId);
-    var selectedCountry = countryElement?.dataset.selected;
-    if (countryElement) {
-        countryElement.length = 0;
-        countryElement.options[0] = new Option("Select Country", "");
+    var countryEl = document.getElementById(countryElementId);
+    var stateEl = document.getElementById(stateElementId);
 
-        for (var i = 0; i < country_arr.length; i++) {
-            let country = country_arr[i].replace(/'/g, '`');
-            let option = new Option(country_arr[i], country);
-            if (selectedCountry && selectedCountry === country) {
-                option.selected = true;
-            }
-            countryElement.options[countryElement.length] = option;
+    if (!countryEl) return;
+
+    var selectedCountry = countryEl.getAttribute('data-selected') || '';
+    countryEl.length = 0;
+    countryEl.options[0] = new Option("Select Country", "");
+
+    for (var i = 0; i < country_arr.length; i++) {
+        let country = country_arr[i].replace(/'/g, '`');
+        let option = new Option(country_arr[i], country);
+        if (selectedCountry && selectedCountry === country) {
+            option.selected = true;
         }
+        countryEl.options[countryEl.length] = option;
+    }
 
-        // trigger state population if needed
-        if (stateElementId) {
-            populateStates(countryElementId, stateElementId); // populate on load
+    if (stateEl) {
+        populateStates(countryElementId, stateElementId);
 
-            countryElement.onchange = function () {
-                populateStates(countryElementId, stateElementId);
-            };
-        }
+        countryEl.onchange = function () {
+            populateStates(countryElementId, stateElementId);
+        };
     }
 }