Django, ajax wypełnić formularz z danymi modelu

Question

Otrzymałem prosty formularz rejestracyjny. W tej postaci są 3 kolejne pola:

• Uniwersytet
• Kurs
• Moduł

Co usiłuję zrobić jest filtrowanie danych. Gdy użytkownik wybierze uniwersytet, pole kursu (wybierz) wyświetli wszystkie kursy należące do tej uczelni. Również gdy użytkownik wybierze kurs, pole modułu (wybierz) wyświetli wszystkie moduły, które należą do tego kursu. Jeśli sprawdzisz obraz, zobaczysz, że to trochę proste.

Udało mi się pokazać wszystkie uniwersytety, kursy i moduły, ale to nie jest praktyczne, ponieważ dane nie są poprawne (pokazuje wszystkie wpisy). Wiem, jak filtrować kwerendy, ale nie wiem, jak to zrobić, używając AJAX. Próbowałem wielu samouczków, ale nie mogłem znaleźć czegoś, więc przykro mi, że nie publikuję kodu.

Jeśli można wskazać mi na prawą samouczek, przykład lub dać mi trochę kodu, aby rozpocząć pracę nad nim ...

UPDATE użyłem przykładu Del, aby rozpocząć pracę nad nim . Chodzi o to, że nie jestem dobry w AJAX i JS. Stworzyłem więc widok, który odbiera żądanie z formularza ajax (na razie po prostu zwraca wszystkie kursy, bez filtrowania). Problem, który mam, polega na tym, że gdy wybieram uniwersytet, wybór course staje się pusty. Więc domyślam się, że nie dostaję danych z widoku. Jeśli można mieć wygląd ..

widok

def ajax_get_courses(request): 
    courses = Course.objects.all() 
    if request.is_ajax(): 
     data = serializers.serialize('json', courses) 
     return HttpResponse(data,'json') 
    else: 
     return render_to_response('registration/registration_form_teacher.html', {'courses':courses}, context=RequestContext(request)) 

js

$(document).ready(function(){ 
    $("#university").change(function(){ 
     var request = $.ajax({ 
      url: "{% url 'ajax_get_courses' %}", 
      type: "POST", 
      data: { university: $("#university").val(), 
        csrfmiddlewaretoken: '{{ csrf_token }}' 
        }, 
      dataType: "html" 
     }); 

     request.done(function(msg) { 
        $("#course").html(msg); 
     }); 

    }); 

}); 

UPDATE 2

Więc po wybrać uniwersytet, wybierz kod źródłowy jest oczywiście niczym to:

<select id="course" name="course" class="form-control">[{"pk": 1, "model": "studies.course", "fields": {"attendance": "FT", "name": "Computer Science", "degree": "BSc (Hons)", "university": 1, "modules": [], "years": 3}}, {"pk": 2, "model": "studies.course", "fields": {"attendance": "FT", "name": "Computer Science", "degree": "MComp (Hons)", "university": 1, "modules": [], "years": 4}}, {"pk": 3, "model": "studies.course", "fields": {"attendance": "FT", "name": "Civil Engineering", "degree": "BEng (Hons)", "university": 1, "modules": [], "years": 3}}, {"pk": 4, "model": "studies.course", "fields": {"attendance": "FT", "name": "Civil Engineering", "degree": "MEng (Hons)", "university": 1, "modules": [], "years": 4}}, {"pk": 5, "model": "studies.course", "fields": {"attendance": "FT", "name": "Pharmacy", "degree": "MPharm (Hons)", "university": 1, "modules": [], "years": 4}}, {"pk": 6, "model": "studies.course", "fields": {"attendance": "FT", "name": "Aeronautical Engineering", "degree": "MEng (Hons)", "university": 4, "modules": [], "years": 4}}, {"pk": 7, "model": "studies.course", "fields": {"attendance": "FT", "name": "Biochemistry", "degree": "BSc (Hons)", "university": 3, "modules": [], "years": 3}}, {"pk": 8, "model": "studies.course", "fields": {"attendance": "FT", "name": "Chemistry", "degree": "BSc (Hons)", "university": 3, "modules": [], "years": 3}}, {"pk": 9, "model": "studies.course", "fields": {"attendance": "FT", "name": "Business Studies", "degree": "BSc (Hons)", "university": 3, "modules": [], "years": 3}}]</select> 

Co oznacza, że ​​otrzymuję dane, ale muszę dodać trochę html? Jak <li>...</li>?

Answer 1

Wymagałoby to kilku kroków do wykonania, ale wygląda na bardziej onieśmielające niż w rzeczywistości.

Najpierw utwórz nowy widok, który otrzyma żądanie ajax i zwróci odpowiednie opcje wyboru jako HTML lub JSON.

Następnie ustaw żądanie ajax, używając jQuery ajax function, aby strzelać, gdy zmienia się okno wyboru uniwersytetu.

Oto prosty przykład, aby spróbować pomóc Ci zacząć: ...

$("#university").change(function(){ 
$.ajax({ 
      url: "{% url 'universities:view_name' %}", 
      type: "POST", 
      data: { university: $("#university").val(), 
        csrfmiddlewaretoken: '{{ csrf_token }}' 
       }, 
      dataType: "html" 
     }); 
    } 

// When the request returns, update the contents of the select with HTML received 
// from your processing view 

request.done(function(msg) { 
      $("#university").html(msg); 
     }); 

Mam nadzieję, że to pomoże trochę. Powodzenia.

EDYCJA: Podczas aktualizacji tworzysz json w swoim widoku, ale żądasz html z ajaxem. Zamiast json, po prostu zbuduj html jako ciąg znaków i wyślij go jako jedyną treść twojego szablonu.

Coś takiego w widoku:

html_string="" 
for course in Courses.objects.all(): 
    html_string += '<option value="%s">%s</option>' % (course.pk, course.name) 

Można wykonać to zadanie z javascript po stronie klienta przy użyciu danych json, ale myślę, że to jest łatwiejsze i wymaga mniejszego transferu danych, aby obsłużyć go w widok.