Issue #3399268 by Masami, yas: Refactor to native JavaScript from jQuery (cloud_geocoder.js)

js/cloud_geocoder.js

-(function ($, drupalSettings) {
+(function (drupalSettings) {
   'use strict';
 
   let countryId = 'edit-field-location-country';
@@ -28,25 +28,29 @@
       return;
     }
 
-    let country = $('#' + countryId).val();
-    let city = $('#' + cityId).val();
-    if (country === '_none' || city.trim().length === 0) {
+    let countryInput = document.getElementById(countryId);
+    let cityInput = document.getElementById(cityId);
+    if (countryInput.value === '_none' || cityInput.value.trim().length === 0) {
       return;
     }
     let url = drupalSettings.cloud.geocoder_url;
 
-    url = url.replace('country', country);
-    url = url.replace('city', city);
+    url = url.replace('country', countryInput.value);
+    url = url.replace('city', cityInput.value);
 
-    $.ajax({
-      async: false,
-      url: url,
-      dataType: 'json',
-      success: function success(data) {
+    let xhr = new XMLHttpRequest();
+    xhr.open('GET', url, false);
+    xhr.setRequestHeader('Content-Type', 'application/json');
+    xhr.onload = function() {
+      if (xhr.status === 200) {
+        let data = JSON.parse(xhr.responseText);
         if (data && data.latitude && data.longitude) {
-          let step = $('#' + latitudeId).attr('step');
-          if (step && $.isNumeric(step)) {
-            step = Number.parseFloat(step);
+          let latitudeInput = document.getElementById(latitudeId);
+          let longitudeInput = document.getElementById(longitudeId);
+
+          let step = latitudeInput.getAttribute('step');
+          if (step && !isNaN(step)) {
+            step = parseFloat(step);
           }
           else {
             step = 0.000001;
@@ -54,31 +58,29 @@
           step = 1 / step;
           let latitude = Math.round(data.latitude * step) / step;
           let longitude = Math.round(data.longitude * step) / step;
-          $('#' + latitudeId).val(latitude);
-          $('#' + longitudeId).val(longitude);
+          latitudeInput.value = latitude;
+          longitudeInput.value = longitude;
         }
       }
-    });
+    };
+    xhr.send();
   };
 
-  $('#' + countryId).change(function () {
-    setGeolocation();
-  });
-
-  $('#' + countryId).blur(function () {
-    setGeolocation();
-  });
-
-  $('#' + cityId).change(function () {
-    setGeolocation();
-  });
+  let countryInput = document.getElementById(countryId);
+  if (countryInput) {
+    countryInput.addEventListener('change', setGeolocation);
+    countryInput.addEventListener('blur', setGeolocation);
+  }
 
-  $('#' + cityId).blur(function () {
-    setGeolocation();
-  });
+  let cityInput = document.getElementById(cityId);
+  if (cityInput) {
+    cityInput.addEventListener('change', setGeolocation);
+    cityInput.addEventListener('blur', setGeolocation);
+  }
 
-  $('form').submit(function () {
-    setGeolocation();
-  });
+  let form = document.querySelector('form');
+  if (form) {
+    form.addEventListener('submit', setGeolocation);
+  }
 
-}(jQuery, drupalSettings));
+}(drupalSettings));