Предварительное заполнение формы Django Select с помощью AJAX

Question

Итак, я собираюсь выбрать дату из средства выбора даты (#id_date в разделе AJAX ниже), он возвращается и запрашивает в нашей БД список рабочих мест с того дня, отображает новый выбор django.формы с этими заданиями в качестве выбора, и отправляет HTML-версию этого обратно в наш JS.

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

Однако, если я просто напечатаю ту же самую вещь на консоль (data.form), и вставляю полученный HTML вФайл HTML, он отображает выпадающий список со всеми значениями и прекрасно работает.

Буду признателен за любые идеи и указания относительно того, почему это не работает правильно.

формы.py

class OrderForm(forms.Form):
    def __init__(self, job_list, *args, **kwargs):
        super(OrderForm, self).__init__(*args, **kwargs)
        self.fields['order'] = forms.ChoiceField(choices=job_list, widget=forms.Select(
            attrs={}))
    order = forms.CharField(widget=forms.Select(
        attrs={}), label='Order #')

views.py

@login_required
def date(request):
    if request.is_ajax():
        day = request.GET.get('date').replace('-', '')
        jobdf = get_jobs(day)
        choices = tuple(
            (m, m + ' - ' + jobdf[jobdf['Inv_Num'] == m]['Customer'].iloc[0].title()) for m in jobdf['Inv_Num'])
        form = OrderForm(job_list=choices).as_p()
        data = {'form': form}
        return JsonResponse(data=data)

AJAX

$("#id_date").change(function() {
  var date = $(this).val()
  $.ajax({
    type: 'GET',
    async: true,
    url: '/date',
    data: {
      'date': date,
      csrfmiddlewaretoken: '{{ csrf_token }}'
    },
    dataType: 'json',
    success: function(data) {
      console.log(data.form)
      $('#id_order').html(data.form);
    }
  })
});

Возвращенный HTML

<p><label for="id_order">Order:</label> <select name="order" id="id_order">
  <option value="ex-job1">ex-job1 - ex-name1*</option>

  <option value="ex-job2">ex-job2 - ex-name2</option>

  <option value="ex-job3">ex-job3 - ex-name3</option>

</select></p>

Answer 1

Попробуйте использовать Fetch API вместо $.ajax:

$("#id_date").change(function() {
    var data = new FormData();
    var data.append('date', $(this).val());
    var data.append('csrfmiddlewaretoken', $('[name="csrfmiddlewaretoken"]').val());
    fetch('/date/', {
            method: 'get',
            body: data
        }).then(function(resp) {
            return resp.json();
        }).then(function(j) {
            $('#id_order').html(j.form);
        })
    })
});

Answer 2

Попробуйте использовать литерал шаблона JavaScript :

$('#id_order').html(`${data.form}`);