Django: как заполнить выпадающий список данными из переменной после AJAX Опубликовать запрос? - PullRequest
0 голосов
/ 07 марта 2020

Я пишу некоторый код AJAX, который принимает выбранное значение раскрывающегося списка и отправляет запрос Post в представление, которое возвращает в переменную некоторые данные из базы данных. Мне нужно заполнить второй выпадающий список данными из этой переменной. Все работает отлично, за исключением последней части, где я не могу заполнить раскрывающийся список.

В приведенном ниже коде html «reg2» - это мой первый раскрывающийся список, а «dep» - тот, который должен быть заполнен:

<select name="reg2" class="toChange">
    {% for item in regions %}
    <option val="{{ item }}" {% ifequal item reg %} selected {% endifequal %}> {{ item }} </option>    
    {% endfor %}
  </select> 

<script type="text/javascript">
  function dropdownChange () {
    var selectedRegion = $(".toChange option:selected").val();
    $.ajax({
            url: '/estimmo/templates/',
            type: 'POST',
            data: {'reg2': selectedRegion}, 
            }); 
    $("#dep").val(query_results);
}

$(".toChange").change(dropdownChange);

</script>

<select id="dep" name="dep">
  {% for item in departements %}
    <option val="{{ item }}"> {{ item }} </option>    
    {% endfor %}
</select>

Сценарий AJAX вызывает следующее представление:


@csrf_exempt
def MyView(request):

    if request.method == 'POST' and request.is_ajax:

        result_r = request.POST.get('reg2')
        regions = data_immo.objects.values_list("nom_reg", flat=True).distinct().order_by('nom_reg')
        departements = data_immo.objects.values_list("insee_dep").filter(Q(nom_reg=result_r)).distinct()

        query_results_dict = {
        'regions': regions,
        'departements': departements,
        }

        return render(request,'home.html', query_results_dict)

Кажется, что до этого все хорошо. Запрос Post работает, и мне удалось собрать в переменной «departements» нужные мне данные.

Сначала я думал, что выпадающий список «dep» будет автоматически заполнен, но это не так. Затем я подумал, что, возможно, мне нужно заполнить этот выпадающий список с помощью скрипта JS / AJAX. Я провел некоторое исследование rnet и попробовал следующий AJAX код, который я вставил в конец моего скрипта:

$("#dep").val(departements);

К сожалению, это не сработало. Я чувствую, что я почти там, и я думаю, что это должно быть довольно просто, но я не мог найти ничего полезного. Не могли бы вы помочь?

ОБНОВЛЕНИЕ: после предложений @xxMrPHDxx я изменил свой код:

views.py:

# code added below the 'departements' variable

        name = []
        value = []

        for d in departements:
            name.append(d['insee_dep'])
            value.append(d['insee_dep'])

        data = {
        "name": name,    
        "value": value,
        }

        return JsonResponse({'data':data})

html исправление сценария:

<script type="text/javascript">
  function dropdownChange () {
    var selectedRegion = $(".toChange option:selected").val();
    $.ajax({
    url: '/estimmo/templates/home.html',
    type: 'POST',
    data: {'reg2': selectedRegion}, 
    success: data=>{
        // Assuming data is in stringified JSON format
        data = JSON.parse(data);
        // Get the dep div
        const dep = $("#dep");
        const options = '';
        // Loop through all the options
        for(const row of data.rows){
            options += `<option value=${row.value}>${row.name}</tr>`;
        }
        // Set the dep innerHTML?
        dep.html(options);
    }
});

К сожалению, он все еще не работает. Я неправильно понял, что мне нужно было сделать?

...