[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

@@ -5,34 +5,30 @@
         background-color: #ffa5000f;
     }
 </style>
+
 {% if form.verbose_name %}
-<div class="oh-modal__dialog-header">
+    <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}}>
+        <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>
 {% 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
+            <button hx-get="{{form.previous_url}}?{{form.ids_key}}={{form.instance_id}}&{{request.GET.urlencode}}"
-      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">
-      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
+            <button hx-get="{{form.next_url}}?{{form.ids_key}}={{form.instance_id}}&{{request.GET.urlencode}}"
-      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">
-      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>
@@ -44,14 +40,10 @@
                 {% 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 }}"
+                            <label class="oh-label {% if field.field.required %} required-star{% endif %}"
-              >{% trans field.label %}</label
+                                for="id_{{ field.name }}">{% trans field.label %}</label>
-            >
                             {% if field.help_text != '' %}
-            <span
+                                <span class="oh-info mr-2" title="{{ field.help_text|safe }}"></span>
-              class="oh-info mr-2"
-              title="{{ field.help_text|safe }}"
-            ></span>
                             {% endif %}
                         </div>
 
@@ -59,6 +51,13 @@
                             <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' }}
@@ -72,22 +71,11 @@
             {% for field in form.hidden_fields %} {{ field }} {% endfor %}
 
             <div class="d-flex flex-row-reverse">
-        <button
+                <button type="submit" class="oh-btn oh-btn--secondary mt-2 mr-0 pl-4 pr-5 oh-btn--w-100-resp"
-          type="submit"
+                    {{form.submit_button_attrs|safe}}>
-          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,34 +687,40 @@ 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 countryEl = document.getElementById(countryElementId);
-    var stateElement = document.getElementById(stateElementId);
+    var stateEl = document.getElementById(stateElementId);
-    var selectedState = stateElement?.dataset.selected;
 
-    stateElement.length = 0;
+    if (!countryEl || !stateEl) return;  // Prevents null access
-    stateElement.options[0] = new Option("Select State", "");
+    var selectedCountryIndex = countryEl.selectedIndex;
-    stateElement.selectedIndex = 0;
+    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 countryEl = document.getElementById(countryElementId);
-    var selectedCountry = countryElement?.dataset.selected;
+    var stateEl = document.getElementById(stateElementId);
-    if (countryElement) {
+
-        countryElement.length = 0;
+    if (!countryEl) return;
-        countryElement.options[0] = new Option("Select Country", "");
+
+    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, '`');
@@ -722,18 +728,16 @@ function populateCountries(countryElementId, stateElementId) {
         if (selectedCountry && selectedCountry === country) {
             option.selected = true;
         }
-            countryElement.options[countryElement.length] = option;
+        countryEl.options[countryEl.length] = option;
     }
 
-        // trigger state population if needed
+    if (stateEl) {
-        if (stateElementId) {
+        populateStates(countryElementId, stateElementId);
-            populateStates(countryElementId, stateElementId); // populate on load
 
-            countryElement.onchange = function () {
+        countryEl.onchange = function () {
             populateStates(countryElementId, stateElementId);
         };
     }
-    }
 }