lundi 1 octobre 2018

Prefilling a Django Select form with AJAX

So what I have going on here is, I select a date from a datepicker (#id_date in the AJAX portion below), this goes back and queries our DB for a list of jobs from that day, renders a new django select form with those jobs as choices, and sends an HTML version of that back to our JS.

What's currently happening is, after this is all done, our dropdown gets populated with the first job in that list when you click it, but no other options are presented / the dropdown itself doesn't appear to work.

However, if I just print the exact same thing to console (data.form), and paste the resulting HTML in an HTML file, it renders a dropdown with all the values and works perfectly fine.

I'd appreciate any insight / directions as to why this isn't functioning correctly.

forms.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: ''
    },
    dataType: 'json',
    success: function(data) {
      console.log(data.form)
      $('#id_order').html(data.form);
    }
  })
});

The returned 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>




Aucun commentaire:

Enregistrer un commentaire