forked from CGM_Public/pretix_original
Update address field logic (Z#23163120) (#4659)
* Move country-dependent JS logic to separate file (avoids code duplication for presale and control) * Correctly apply "required" attribute to address state field * Load address format information when selecting country * Fix some other bugs and inconsistencies
This commit is contained in:
Mira
56
src/pretix/static/pretixbase/js/addressform.js
Normal file
56
src/pretix/static/pretixbase/js/addressform.js
Normal file
@@ -0,0 +1,56 @@
|
||||
$(function () {
|
||||
"use strict";
|
||||
|
||||
$("select[data-country-information-url]").each(function () {
|
||||
let xhr;
|
||||
const dependency = $(this),
|
||||
loader = $("<span class='fa fa-cog fa-spin'></span>").hide().prependTo(dependency.closest(".form-group").find("label")),
|
||||
url = this.getAttribute('data-country-information-url'),
|
||||
form = dependency.closest(".panel-body, form, .profile-scope"),
|
||||
isRequired = dependency.closest(".form-group").is(".required"),
|
||||
dependents = {
|
||||
'city': form.find("input[name$=city]"),
|
||||
'zipcode': form.find("input[name$=zipcode]"),
|
||||
'street': form.find("textarea[name$=street]"),
|
||||
'state': form.find("select[name$=state]"),
|
||||
'vat_id': form.find("input[name$=vat_id]"),
|
||||
},
|
||||
update = function (ev) {
|
||||
if (xhr) {
|
||||
xhr.abort();
|
||||
}
|
||||
for (var k in dependents) dependents[k].prop("disabled", true);
|
||||
loader.fadeIn();
|
||||
xhr = $.getJSON(url + '?country=' + dependency.val(), function (data) {
|
||||
var selected_value = dependents.state.prop("data-selected-value");
|
||||
if (selected_value) dependents.state.prop("data-selected-value", "");
|
||||
dependents.state.find("option:not([value=''])").remove();
|
||||
if (data.data.length > 0) {
|
||||
$.each(data.data, function (k, s) {
|
||||
var o = $("<option>").attr("value", s.code).text(s.name);
|
||||
if (selected_value == s.code) o.prop("selected", true);
|
||||
dependents.state.append(o);
|
||||
});
|
||||
}
|
||||
for(var k in dependents) {
|
||||
const options = data[k],
|
||||
dependent = dependents[k],
|
||||
visible = 'visible' in options ? options.visible : true,
|
||||
required = 'required' in options && options.required && isRequired && visible;
|
||||
|
||||
dependent.closest(".form-group").toggle(visible).toggleClass('required', required);
|
||||
dependent.prop("required", required);
|
||||
}
|
||||
for (var k in dependents) dependents[k].prop("disabled", false);
|
||||
}).always(function() {
|
||||
loader.fadeOut();
|
||||
}).fail(function(){
|
||||
// TODO: handle failed request
|
||||
});
|
||||
};
|
||||
dependents.state.prop("data-selected-value", dependents.state.val());
|
||||
update();
|
||||
dependency.on("change", update);
|
||||
});
|
||||
|
||||
});
|
||||
@@ -434,60 +434,6 @@ var form_handlers = function (el) {
|
||||
dependency.closest('.form-group').find('input[name=' + dependency.attr("name") + ']').on("dp.change", update);
|
||||
});
|
||||
|
||||
$("input[name$=vat_id][data-countries-with-vat-id]").each(function () {
|
||||
var dependent = $(this),
|
||||
dependency_country = $(this).closest(".panel-body, form").find('select[name$=country]'),
|
||||
dependency_id_is_business_1 = $(this).closest(".panel-body, form").find('input[id$=id_is_business_1]'),
|
||||
update = function (ev) {
|
||||
if (dependency_id_is_business_1.length && !dependency_id_is_business_1.prop("checked")) {
|
||||
dependent.closest(".form-group").hide();
|
||||
} else if (dependent.attr('data-countries-with-vat-id').split(',').includes(dependency_country.val())) {
|
||||
dependent.closest(".form-group").show();
|
||||
} else {
|
||||
dependent.closest(".form-group").hide();
|
||||
}
|
||||
};
|
||||
update();
|
||||
dependency_country.on("change", update);
|
||||
dependency_id_is_business_1.on("change", update);
|
||||
});
|
||||
|
||||
$("select[name$=state]:not([data-static])").each(function () {
|
||||
var dependent = $(this),
|
||||
counter = 0,
|
||||
dependency = $(this).closest(".panel-body, form").find('select[name$=country]'),
|
||||
update = function (ev) {
|
||||
counter++;
|
||||
var curCounter = counter;
|
||||
dependent.prop("disabled", true);
|
||||
dependency.closest(".form-group").find("label").prepend("<span class='fa fa-cog fa-spin'></span> ");
|
||||
$.getJSON('/js_helpers/states/?country=' + dependency.val(), function (data) {
|
||||
if (counter > curCounter) {
|
||||
return; // Lost race
|
||||
}
|
||||
dependent.find("option").filter(function (t) {return !!$(this).attr("value")}).remove();
|
||||
if (data.data.length > 0) {
|
||||
$.each(data.data, function (k, s) {
|
||||
dependent.append($("<option>").attr("value", s.code).text(s.name));
|
||||
});
|
||||
dependent.closest(".form-group").show();
|
||||
dependent.prop('required', dependency.prop("required"));
|
||||
} else {
|
||||
dependent.closest(".form-group").hide();
|
||||
dependent.prop("required", false);
|
||||
}
|
||||
dependent.prop("disabled", false);
|
||||
dependency.closest(".form-group").find("label .fa-spin").remove();
|
||||
});
|
||||
};
|
||||
if (dependent.find("option").length === 1) {
|
||||
dependent.closest(".form-group").hide();
|
||||
} else {
|
||||
dependent.prop('required', dependency.prop("required"));
|
||||
}
|
||||
dependency.on("change", update);
|
||||
});
|
||||
|
||||
el.find("div.scrolling-choice:not(.no-search)").each(function () {
|
||||
if ($(this).find("input[type=text]").length > 0) {
|
||||
return;
|
||||
|
||||
@@ -517,65 +517,6 @@ $(function () {
|
||||
dependency.closest('.form-group, form').find('input[name=' + dependency.attr("name") + ']').on("dp.change", update);
|
||||
});
|
||||
|
||||
$("input[name$=vat_id][data-countries-with-vat-id]").each(function () {
|
||||
var dependent = $(this),
|
||||
dependency_country = $(this).closest(".panel-body, form").find('select[name$=country]'),
|
||||
dependency_id_is_business_1 = $(this).closest(".panel-body, form").find('input[id$=id_is_business_1]'),
|
||||
update = function (ev) {
|
||||
if (dependency_id_is_business_1.length && !dependency_id_is_business_1.prop("checked")) {
|
||||
dependent.closest(".form-group").hide();
|
||||
} else if (dependent.attr('data-countries-with-vat-id').split(',').includes(dependency_country.val())) {
|
||||
dependent.closest(".form-group").show();
|
||||
} else {
|
||||
dependent.closest(".form-group").hide();
|
||||
}
|
||||
};
|
||||
update();
|
||||
dependency_country.on("change", update);
|
||||
dependency_id_is_business_1.on("change", update);
|
||||
});
|
||||
|
||||
$("select[name$=state]").each(function () {
|
||||
var dependent = $(this),
|
||||
counter = 0,
|
||||
dependency = $(this).closest(".panel-body, form").find('select[name$=country]'),
|
||||
update = function (ev) {
|
||||
counter++;
|
||||
var curCounter = counter;
|
||||
dependent.prop("disabled", true);
|
||||
dependency.closest(".form-group").find("label").prepend("<span class='fa fa-cog fa-spin'></span> ");
|
||||
$.getJSON('/js_helpers/states/?country=' + dependency.val(), function (data) {
|
||||
if (counter > curCounter) {
|
||||
return; // Lost race
|
||||
}
|
||||
var selected_value = dependent.prop("data-selected-value");
|
||||
dependent.find("option").filter(function (t) {return !!$(this).attr("value")}).remove();
|
||||
if (data.data.length > 0) {
|
||||
$.each(data.data, function (k, s) {
|
||||
var o = $("<option>").attr("value", s.code).text(s.name);
|
||||
if (s.code == selected_value || (selected_value && selected_value.indexOf && selected_value.indexOf(s.code) > -1)) {
|
||||
o.prop("selected", true);
|
||||
}
|
||||
dependent.append(o);
|
||||
});
|
||||
dependent.closest(".form-group").show();
|
||||
dependent.prop('required', dependency.prop("required"));
|
||||
} else {
|
||||
dependent.closest(".form-group").hide();
|
||||
dependent.prop("required", false);
|
||||
}
|
||||
dependent.prop("disabled", false);
|
||||
dependency.closest(".form-group").find("label .fa-spin").remove();
|
||||
});
|
||||
};
|
||||
if (dependent.find("option").length === 1) {
|
||||
dependent.closest(".form-group").hide();
|
||||
} else {
|
||||
dependent.prop('required', dependency.prop("required"));
|
||||
}
|
||||
dependency.on("change", update);
|
||||
});
|
||||
|
||||
form_handlers($("body"));
|
||||
|
||||
var local_tz = moment.tz.guess()
|
||||
|
||||
Reference in New Issue
Block a user