$(function () {
/**
* LOCALITY LOOKUPS
*/
$('[name*=country]').on('change', function () {
var prefix = $(this).attr('name').substring(0, $(this).attr('name').length - 'country'.length);
updateLocalityChosen($(this).val(), true, prefix);
});
/**
* ZIPCODE LOOKUPS
*/
$('[name*=postal_code]').on('keyup', function () {
if ($(this).val().length < 5) return;
var prefix = $(this).attr('name').substring(0, $(this).attr('name').length - 'postal_code'.length);
$.getJSON('/api/zip_info/' + $(this).val() + '/', function (data) {
if (data.locality_id) {
$('[name=' + prefix + 'locality] option[value=' + data.locality_id + ']').prop('selected', true).siblings().prop('selected', false);
$('[name=' + prefix + 'locality]').trigger("change");
$('[name=' + prefix + 'locality]').trigger("chosen:updated");
}
});
}).on('change', function () {
$(this).trigger('keyup');
});
// CITY LOOKUP
updateCityChosen();
});
function updateLocalityChosen(country_id, async, prefix) {
var locality_field = prefix == null || prefix == '' ? $('[name*=locality]') : $('[name=' + prefix + 'locality]');
locality_field.prop('disabled', true);
$.ajax({
type: 'GET',
url: '/api/localities/' + country_id + '/',
dataType: 'json',
async: async,
success: function (data) {
locality_field.empty();
$.each(data, function (i, e) {
locality_field.append('');
});
// Check for autocomplete data to autoselect the locality chosen
if (typeof selected_address !== 'undefined' && locality_field.find('option:contains("' + selected_address.locality + '")').length > 0) {
locality_field.find('option:contains("' + selected_address.locality + '")').attr('selected', true);
}
// Update inputs if needed
if (data.length) locality_field.prop('disabled', false);
else locality_field.append('');
locality_field.trigger("change");
locality_field.trigger("chosen:updated");
}
});
}
// For city dropdown on checkout SHIPPING
$(document).on("change", "#id_locality", function(e){
let value = $(this).val();
if(value){
updateCityChosen(value);
}
});
// Function for fetching data to endpoint
function updateCityChosen(value=0){
value = value ? value : $("#id_locality").val();
if(value){
$.ajax({
method: "GET",
url:"/api/city-data/" + value ,
dataType: "json",
success: function(data){
let city_field = $("[name=city]");
let chosen_div = $(".city .chosen-container");
let selectElement = document.createElement("select");
if(data.length !== 0){
if($("[name=city]").is("input")){
// copy the existing input element's attributes to the new select element
for (var i = 0; i < city_field[0].attributes.length; ++ i) {
if (i === 0 || 2) {
let attribute = city_field[0].attributes[i];
// type and value don't apply, so skip them
// ** you might also want to skip style, or others -- modify as needed **
if (attribute.name != 'type' && attribute.name != 'value') {
selectElement.setAttribute(attribute.name, attribute.value);
}
}
}
// create an empty option for Select an Option
selectElement.appendChild(createOption());
// create option base on response data
$.each(data, function(i, e){
selectElement.appendChild(createOption(e.name));
});
// Previous state of city field.
let previous_field = city_field;
city_field.replaceWith(selectElement);
if(previous_field.is("input")) {
$("[name=city]").chosen();
if(previous_field.val()){
updateCity(previous_field.val());
}
}
}
} else {
if(city_field.is("select")) {
chosen_div.remove();
city_field.replaceWith('');
}
}
}
});
}
}
// Function for creating select options
function createOption(city_name="") {
let optionElement = document.createElement("option");
optionElement.appendChild(document.createTextNode(city_name));
optionElement.setAttribute('value', city_name);
return optionElement
}
// Function for updating city chosen
function updateCity(value){
$('[name=city] option[value="' + value + '"]').prop('selected', true).siblings().prop('selected', false);
$('[name=city]').trigger("change");
$('[name=city]').trigger("chosen:updated");
}