Django Problem with displaying a list in the form when selecting a city: JavaScript and AJAX do not update the content. How to fix?

Using Django Forms & APIs
1

There is a function for placing an order (create_order) that processes the form. The form has a field (country) - city. The idea is this: I want the user to select his city and see the Nova Poshta branches in his city.

There are two functions that process the city and display these branches, but they do not work in Django. Tell me how to do this.

views.py

def create_order(request):
    warehouses = []
    if request.method == "POST":
        form = CreateOrderForm(data=request.POST)
        if form.is_valid():
            try:
                with transaction.atomic():
                    if request.user.is_authenticated:
                        user = request.user
                        cart_items = Cart.objects.filter(user=user)
                    else:
                        session_key = request.session.session_key
                        cart_items = Cart.objects.filter(session_key=session_key)

                    if cart_items.exists():
                        # Создать заказ
                        if request.user.is_authenticated:
                            order = Order.objects.create(
                                user=user,
                                phone_number=form.cleaned_data["phone_number"],
                                country=form.cleaned_data["country"],
                                delivery_method=form.cleaned_data["delivery_method"],
                                delivery_address=form.cleaned_data["delivery_address"],
                                comment=form.cleaned_data["comment"],
                            )
                        else:
                            order = Order.objects.create(
                                session_key=request.session.session_key,
                                phone_number=form.cleaned_data["phone_number"],
                                country=form.cleaned_data["country"],
                                delivery_method=form.cleaned_data["delivery_method"],
                                delivery_address=form.cleaned_data["delivery_address"],
                                comment=form.cleaned_data["comment"],
                            )

                        # Создать заказанные товары
                        for cart_item in cart_items:
                            product = cart_item.product
                            title = cart_item.product.title
                            price = cart_item.product.price
                            amount = cart_item.amount
                            OrderItem.objects.create(
                                order=order,
                                product=product,
                                title=title,
                                price=price,
                                amount=amount,
                            )

                        # Очищение корзины пользователя
                        cart_items.delete()

                        # Получение и отправка отделений в форме JsonResponse
                        country = form.cleaned_data["country"]
                        country_ref = get_city_ref(country)
                        warehouses = get_warehouses(country_ref)

            except ValidationError as e:
                messages.warning(request, str(e))
                return redirect("product:index")

    else:
        if request.user.is_authenticated:
            initial = {
                "email": request.user.email,
                "first_name": request.user.first_name,
                "last_name": request.user.last_name,
                "middle_name": request.user.middle_name,
            }
            form = CreateOrderForm(initial=initial)
        else:
            form = CreateOrderForm()

    context = {"form": form, "warehouses": warehouses}
    return render(request, "orders/create_order.html", context)

forms.py

class CreateOrderForm(forms.Form):
    email = forms.EmailField()
    first_name = forms.CharField()
    middle_name = forms.CharField()
    last_name = forms.CharField()
    phone_number = forms.CharField()
    country = forms.CharField()
    delivery_method = forms.CharField()
    delivery_address = forms.CharField()
    payment_on_get = forms.CharField()
    comment = forms.CharField(required=False)

utils.py

def get_city_ref(country):
    """Получает Ref определенного города."""

    country_ref = ""
    json = {
        "apiKey": "",
        "modelName": "Address",
        "calledMethod": "getCities",
        "methodProperties": {
            "FindByString": country,  # Передаем значение из формы
        },
    }

    response = requests.post(
        "https://api.novaposhta.ua/v2.0/json/", json=json, timeout=1
    )

    if response.status_code == 200:
        data = response.json()["data"]
        for country_item in data:
            if country_item["Description"] == country:
                country_ref = country_item["Ref"]

        return country_ref

    else:
        print("Ошибка при получении country_ref:", response.text)


def get_warehouses(country_ref):
    """Получаем отделения из опеределенного города используя Ref."""

    warehouses = []

    # Получение отделений
    json_data = {
        "apiKey": "b0b6ea3934d1d018b3155eb1658c2e36",
        "modelName": "AddressGeneral",
        "calledMethod": "getWarehouses",
        "methodProperties": {
            "CityRef": country_ref,  # Город
        },
    }

    response = requests.post(
        "https://api.novaposhta.ua/v2.0/json/", json=json_data, timeout=1
    )

    if response.status_code == 200:
        data = response.json()["data"]

        for item in data:
            if item["Description"].split()[0] != "Поштомат":
                warehouses.append(item["Description"])

        return JsonResponse({"warehouses": warehouses})

create_order.html

<form action="{% url 'orders:create_order' %}" method="post">
            {% csrf_token %}
            <div class="row g-3">
              <div class="col-12">
                <label for="id_email" class="form-label">E-mail <span class="text-danger">*</span></label>
                <input type="email" class="form-control" name="email" id="id_email" value="{% if form.email.value %}{{ form.email.value }}{% endif %}" placeholder="you@example.com" />
                {% if form.email.errors %}
                  <div class="alert alert-danger alert-dismissible fade show">{{ form.email.errors }}</div>
                {% endif %}
                <hr />
              </div>

              <h4 class="text-uppercase fw-semibold mb-1">АДРЕСА ДЛЯ ВИСТАВЛЕННЯ РАХУНКУ</h4>

              <div class="col-sm-4">
                <label for="id_first_name" class="form-label">Ім'я <span class="text-danger">*</span></label>
                <input type="text" class="form-control" name="first_name" id="id_first_name" value="{% if form.first_name.value %}{{ form.first_name.value }}{% endif %}" />
                {% if form.first_name.errors %}
                  <div class="alert alert-danger alert-dismissible fade show">{{ form.first_name.errors }}</div>
                {% endif %}
              </div>

              <div class="col-sm-4">
                <label for="id_last_name" class="form-label">Прізвище <span class="text-danger">*</span></label>
                <input type="text" class="form-control" name="last_name" id="id_last_name" value="{% if form.last_name.value %}{{ form.last_name.value }}{% endif %}" />
                {% if form.last_name.errors %}
                  <div class="alert alert-danger alert-dismissible fade show">{{ form.last_name.errors }}</div>
                {% endif %}
              </div>

              <div class="col-sm-4">
                <label for="id_middle_name" class="form-label">По батькові <span class="text-danger">*</span></label>
                <input type="text" class="form-control" name="middle_name" id="id_middle_name" value="{% if form.middle_name.value %}{{ form.middle_name.value }}{% endif %}" />
                {% if form.middle_name.errors %}
                  <div class="alert alert-danger alert-dismissible fade show">{{ form.middle_name.errors }}</div>
                {% endif %}
              </div>

              <div class="col-12">
                <label for="id_phone_number" class="form-label">Номер телефона <span class="text-danger">*</span></label>
                <input type="text" class="form-control" name="phone_number" id="id_phone_number" value="{% if form.phone_number.value %}{{ form.phone_number.value }}{% endif %}" placeholder="У форматі XXX XXX XXX XXX" />
                {% if form.phone_number.errors %}
                  <div class="alert alert-danger alert-dismissible fade show">{{ form.phone_number.errors }}</div>
                {% endif %}
              </div>

              <div class="col-12">
                <label for="id_country" class="form-label">Ваш населений пункт <span class="text-danger">*</span></label>

                <select class="form-select" name="country" id="id_country">
                  <option>Вибіріть ваш населений пункт</option>
                  <option value="Вінниця" {% if form.country.value == "Вінниця" %}selected{% endif %}>Вінниця</option>
                  <option value="Дніпро" {% if form.country.value == "Дніпро" %}selected{% endif %}>Дніпро</option>
                  <option value="Житомир" {% if form.country.value == "Житомир" %}selected{% endif %}>Житомир</option>
                  <option value="Запоріжжя" {% if form.country.value == "Запоріжжя" %}selected{% endif %}>Запоріжжя</option>
                  <option value="Івано-Франківськ" {% if form.country.value == "Івано-Франківськ" %}selected{% endif %}>Івано-Франківськ</option>
                  <option value="Київ" {% if form.country.value == "Київ" %}selected{% endif %}>Київ</option>
                  <option value="Кропивницький" {% if form.country.value == "Кропивницький" %}selected{% endif %}>Кропивницький</option>
                  <option value="Луцьк" {% if form.country.value == "Луцьк" %}selected{% endif %}>Луцьк</option>
                  <option value="Львів" {% if form.country.value == "Львів" %}selected{% endif %}>Львів</option>
                  <option value="Миколаїв" {% if form.country.value == "Миколаїв" %}selected{% endif %}>Миколаїв</option>
                  <option value="Одеса" {% if form.country.value == "Одеса" %}selected{% endif %}>Одеса</option>
                  <option value="Полтава" {% if form.country.value == "Полтава" %}selected{% endif %}>Полтава</option>
                  <option value="Рівне" {% if form.country.value == "Рівне" %}selected{% endif %}>Рівне</option>
                  <option value="Суми" {% if form.country.value == "Суми" %}selected{% endif %}>Суми</option>
                  <option value="Тернопіль" {% if form.country.value == "Тернопіль" %}selected{% endif %}>Тернопіль</option>
                  <option value="Харків" {% if form.country.value == "Харків" %}selected{% endif %}>Харків</option>
                  <option value="Херсон" {% if form.country.value == "Херсон" %}selected{% endif %}>Херсон</option>
                  <option value="Хмельницький" {% if form.country.value == "Хмельницький" %}selected{% endif %}>Хмельницький</option>
                  <option value="Черкаси" {% if form.country.value == "Черкаси" %}selected{% endif %}>Черкаси</option>
                  <option value="Чернівці" {% if form.country.value == "Чернівці" %}selected{% endif %}>Чернівці</option>
                  <option value="Чернігів" {% if form.country.value == "Чернігів" %}selected{% endif %}>Чернігів</option>
                </select>
               
                {% if form.country.errors %}
                  <div class="alert alert-danger alert-dismissible fade show">{{ form.country.errors }}</div>
                {% endif %}
              </div>

              <div class="col-md-12 d-flex flex-column">
                <label for="id_delivery_method" class="form-label">Спосіб доставки <span class="text-danger">*</span></label>
                <div class="form-check form-check-inline mb-3">
                  <input class="form-check-input" type="radio" name="delivery_method" id="id_delivery_method" value="0" 
                    {% if form.delivery_method.value == '0' %}checked{% endif %}/>
                  <label class="form-check-label" for="id_delivery_method">Meest пошта відділення</label>
                  {% if form.delivery_method.errors %}
                    <div class="alert alert-danger alert-dismissible fade show">{{ form.delivery_method.errors }}</div>
                  {% endif %}
                </div>
                <div class="form-check form-check-inline mb-3">
                  <input class="form-check-input" type="radio" name="delivery_method" id="id_delivery_method" value="1" 
                    {% if form.delivery_method.value == '1' %}checked{% endif %}/>
                  <label class="form-check-label" for="id_delivery_method">Нова почта відділення</label>
                  {% if form.delivery_method.errors %}
                    <div class="alert alert-danger alert-dismissible fade show">{{ form.delivery_method.errors }}</div>
                  {% endif %}
                </div>
              </div>

              <div class="col-12">
                <label for="id_delivery_address" class="form-label">Знайти відділення <span class="text-danger">*</span></label>

                <select class="form-select" name="delivery_address" id="id_delivery_address">
                  <option>Знайти відділення</option>
                  {% for warehouse in warehouses %}
                    <option value="{{ warehouse }}">{{ warehouse }}</option>
                  {% endfor %}
                </select>

                {% if form.delivery_addres.errors %}
                  <div class="alert alert-danger alert-dismissible fade show">{{ form.delivery_addres.errors }}</div>
                {% endif %}
              </div>

              <div class="col-12">
                <label for="id_payment_on_get" class="form-label">Спосіб оплати <span class="text-danger">*</span></label>
                <div class="">
                  <input class="form-check-input" type="radio" name="payment_on_get" id="id_payment_on_get" value="1" checked />
                  <label for="id_payment_on_get" class="form-label">При отриманні</label>

                  {% if form.payment_on_get.errors %}
                    <div class="alert alert-danger alert-dismissible fade show">{{ form.payment_on_get.errors }}</div>
                  {% endif %}
                </div>
              </div>

              <div class="col-12">
                <label for="id_comment" class="form-label">Коментар (необов'язково)</label>
                <textarea type="text" class="form-control h-auto" name="comment" id="id_comment" value="{% if form.comment.value %}{{ form.comment.value }}{% endif %}" rows="3"></textarea>
              </div>
            </div>

            <hr class="my-4" />

            <button class="w-100 btn btn-main btn-lg mb-5" type="submit">Купити зараз</button>
          </form>