Fix race conditions on lookup fields and improve display of values

This commit is contained in:
Michael Hall 2018-01-21 14:01:00 -05:00
parent 11caac5fa9
commit df1f638c8d
6 changed files with 62 additions and 17 deletions

View file

@ -71,6 +71,7 @@ class SPR(models.Model):
return 'no_spr'
class SPRSerializer(serializers.ModelSerializer):
display = serializers.CharField(source='__str__', read_only=True)
class Meta:
model = SPR
fields = (
@ -78,7 +79,8 @@ class SPRSerializer(serializers.ModelSerializer):
'name',
'code',
'country',
'slug'
'slug',
'display'
)
class City(models.Model):
@ -102,6 +104,7 @@ class City(models.Model):
class CitySerializer(serializers.ModelSerializer):
display = serializers.CharField(source='__str__', read_only=True)
class Meta:
model = City
fields = (
@ -109,6 +112,7 @@ class CitySerializer(serializers.ModelSerializer):
'name',
'spr',
'tz',
'slug'
'slug',
'display'
)

View file

@ -15,18 +15,22 @@
{% block javascript %}
<script type="text/javascript">
$(document).ready(function(){
{% with event_form.fields.place.widget as widget %}
$("#{{ widget.name }}_search").keyup(function() {
$("#place_search").keyup(function() {
var searchText = this.value;
$.getJSON("{{ widget.source }}?q="+searchText, function(data) {
var selectField = $("#{{ widget.name }}_select");
$.getJSON("/api/places/?q="+searchText, function(data) {
var searchField = $("#place_search")[0];
var q = this.url.match(/q=([^&]+)/)[1]
var c = searchField.value
if (c != q) return;
var selectField = $("#place_select");
selectField.empty();
$.each(data, function(){
selectField.append('<option value="'+ this.{{ widget.key }} +'">'+ this.name+' '+this.city + '</option>')
selectField.append('<option value="'+ this.id +'">'+ this.name+' '+this.city + '</option>')
});
});
});
{% endwith %}
$.datepicker.setDefaults({
showOn: 'focus',

View file

@ -18,10 +18,15 @@ $(document).ready(function(){
$("#city_search").keyup(function() {
var searchText = this.value;
$.getJSON("/api/cities/?q="+searchText, function(data) {
var searchField = $("#city_search")[0];
var q = this.url.match(/q=([^&]+)/)[1]
var c = searchField.value
if (c != q) return;
var selectField = $("#city_select");
selectField.empty();
$.each(data, function(){
selectField.append('<option value="'+ this.id +'">'+ this.name+ '</option>')
selectField.append('<option value="'+ this.id +'">'+ this.display+ '</option>')
});
});
});

View file

@ -16,6 +16,11 @@ $(document).ready(function(){
$("#country_search").keyup(function() {
var searchText = this.value;
$.getJSON("/api/countries/?q="+searchText, function(data) {
var searchField = $("#country_search")[0];
var q = this.url.match(/q=([^&]+)/)[1]
var c = searchField.value
if (c != q) return;
var selectField = $("#country_select");
selectField.empty();
$.each(data, function(){
@ -27,6 +32,11 @@ $(document).ready(function(){
var searchText = this.value;
var country_id = $("#country_select")[0].selectedOptions[0].value;
$.getJSON("/api/spr/?q="+searchText+"&country="+country_id, function(data) {
var searchField = $("#spr_search")[0];
var q = this.url.match(/q=([^&]+)/)[1]
var c = searchField.value
if (c != q) return;
var selectField = $("#spr_select");
selectField.empty();
$.each(data, function(){
@ -38,6 +48,11 @@ $(document).ready(function(){
var searchText = this.value;
var spr_id = $("#spr_select")[0].selectedOptions[0].value;
$.getJSON("/api/cities/?q="+searchText+"&spr="+spr_id, function(data) {
var searchField = $("#city_search")[0];
var q = this.url.match(/q=([^&]+)/)[1]
var c = searchField.value
if (c != q) return;
var selectField = $("#city_select");
selectField.empty();
$.each(data, function(){
@ -45,7 +60,6 @@ $(document).ready(function(){
});
});
});
});
</script>
});</script>
{% endblock %}

View file

@ -15,18 +15,21 @@
{% block javascript %}
<script type="text/javascript">
$(document).ready(function(){
{% with event_form.fields.place.widget as widget %}
$("#{{ widget.name }}_search").keyup(function() {
$("#place_search").keyup(function() {
var searchText = this.value;
$.getJSON("{{ widget.source }}?q="+searchText, function(data) {
var selectField = $("#{{ widget.name }}_select");
$.getJSON("/api/places/?q="+searchText, function(data, status) {
var searchField = $("#place_search")[0];
var q = this.url.match(/q=([^&]+)/)[1]
var c = searchField.value
if (c != q) return;
var selectField = $("#place_select");
selectField.empty();
$.each(data, function(){
selectField.append('<option value="'+ this.{{ widget.key }} +'">'+ this.name+' '+this.city + '</option>')
selectField.append('<option value="'+ this.id +'">'+ this.name+' '+this.city + '</option>')
});
});
});
{% endwith %}
$.datepicker.setDefaults({
showOn: 'focus',

View file

@ -16,6 +16,11 @@ $(document).ready(function(){
$("#country_search").keyup(function() {
var searchText = this.value;
$.getJSON("/api/countries/?q="+searchText, function(data) {
var searchField = $("#country_search")[0];
var q = this.url.match(/q=([^&]+)/)[1]
var c = searchField.value
if (c != q) return;
var selectField = $("#country_select");
selectField.empty();
$.each(data, function(){
@ -27,6 +32,11 @@ $(document).ready(function(){
var searchText = this.value;
var country_id = $("#country_select")[0].selectedOptions[0].value;
$.getJSON("/api/spr/?q="+searchText+"&country="+country_id, function(data) {
var searchField = $("#spr_search")[0];
var q = this.url.match(/q=([^&]+)/)[1]
var c = searchField.value
if (c != q) return;
var selectField = $("#spr_select");
selectField.empty();
$.each(data, function(){
@ -38,6 +48,11 @@ $(document).ready(function(){
var searchText = this.value;
var spr_id = $("#spr_select")[0].selectedOptions[0].value;
$.getJSON("/api/cities/?q="+searchText+"&spr="+spr_id, function(data) {
var searchField = $("#city_search")[0];
var q = this.url.match(/q=([^&]+)/)[1]
var c = searchField.value
if (c != q) return;
var selectField = $("#city_select");
selectField.empty();
$.each(data, function(){