Presently, I am encountering an issue with sending the values of two dropdowns to a django view. My code would have functioned correctly if the dropdowns were independent. Unfortunately, this is not the case as the first one updates the second one. Therefore, I need to ensure that my AJAX post request happens once the second dropdown has been updated.
Below is my current HTML/Javascript code:
<select name="d1" class="toChange">
{% for item in items1 %}
<option val="{{ item }}"> {{ item }} </option>
{% endfor %}
</select>
<select name="d2">
{% for item in items2 %}
<option val="{{ item }}"> {{ item }} </option>
{% endfor %}
</select>
<script type="text/javascript">
function dropdownChange () {
var value_d1 = $(".toChange option:selected").val();
var value_d2 = $("select[name=d2] option:selected").val();
$.ajax({
url: '/myApp/templates/',
type: 'POST',
data: {'d1': value_d1, 'd2': value_d2},
success: function(data) {
var str = '';
data.forEach(function(opt){
str += '<option value="' + opt + '">' + opt + '</option>';
});
document.getElementById("d2").innerHTML = str;
}
});
$(".toChange").change(dropdownChange);
The challenge here is that the change in d1 updates d2, but the AJAX call is made before d2 gets updated. This results in sending the wrong value to my view. How can I address this issue?
UPDATE: Integration of the suggested code by TM.96
<select id="d1" name="d1" class="toChange">
{% for item in items1 %}
<option val="{{ item }}"> {{ item }} </option>
{% endfor %}
</select>
<select id="d2" name="d2">
{% for item in items2 %}
<option val="{{ item }}"> {{ item }} </option>
{% endfor %}
</select>
<script type="text/javascript">
let select1 = document.getElementById('d1');
let select2 = document.getElementById('d2');
function onChangeSelect1() {
window.select2.value = window.select1.options[window.select1.selectedIndex].value;
onChangeSelect2();
}
function onChangeSelect2() {
console.log('Value of Select 1: ' + window.select1.value);
console.log('Value of Select 2: ' + window.select2.value);
$.ajax({
url: '/myApp/templates/',
type: 'POST',
data: {'d1': select1, 'd2': select2},
success: function(data) {
var str = '';
data.forEach(function(opt){
str += '<option value="' + opt + '">' + opt + '</option>';
});
document.getElementById("d2").innerHTML = str;
}
});
}
$(".toChange").change(dropdownChange);
</script>
UPDATE 2:
def MyView(request):
if request.method == 'POST' and request.is_ajax:
result_r = request.POST.get('d1')
result_d = request.POST.get('d2')
query_results = data_immo.objects.all()
regions = data_immo.objects.values_list("nom_reg", flat=True).distinct().order_by('nom_reg')
departments = data_immo.objects.values_list("insee_dep").filter(Q(nom_reg=result_r)).distinct()
cities = data_immo.objects.values_list("nom_com").filter(Q(insee_dep=result_d)).distinct()
print(departments)
query_results_dict = {
'query_results': query_results,
'regions': regions,
'departments': departments,
'reg': result_r
}
departmentsVar=[]
for item in departments:
item = int(item[0])
departmentsVar.append(item)
departmentsVar.sort()
departmentsVar = json.dumps(departmentsVar)
citiesVar=[]
for item in cities:
citiesVar.append(item)
citiesVar.sort()
citiesVar = json.dumps(citiesVar)
return HttpResponse(departmentsVar, content_type='application/json')
Technically, I need to return both departmentsVar and citiesVar but for some reasons my attempts have failed. It seems that I can only return one variable (so here departmentsVar). I tried to add the two in a dictionary but it didn't work.