Django, Ajax bevölkert Formular mit Modelldaten

Question

So bekam ich ein einfaches Registrierungsformular. In dieser Form gibt es 3 weitere Felder:

• Universität
• Course
• Modul

Was ich versuche, die Daten zu filtern, zu tun ist. Wenn der Benutzer also eine Universität auswählt, werden im Kursfeld (select) alle Kurse angezeigt, die zu dieser Universität gehören. Wenn der Benutzer einen Kurs auswählt, zeigt das Modulfeld (select) alle Module an, die zu diesem Kurs gehören. Wenn Sie das Bild überprüfen, werden Sie sehen, dass es ein bisschen einfach ist.

Ich habe es geschafft, alle Universitäten, Kurse und Module zu zeigen, aber das ist nicht praktikabel, da die Daten nicht korrekt sind (zeigt alle Einträge). Ich weiß, wie man das Abfrage-Set filtert, aber ich weiß nicht, wie man AJAX dazu benutzt. Ich habe viele Tutorials versucht, konnte aber nichts finden. Tut mir leid, dass ich keinen Code gepostet habe.

Wenn Sie mich nach rechts Tutorial Beispiel Punkt oder einen Code geben Sie mir arbeiten, es zu starten ...

UPDATE I Dels Beispiel verwendet, um daran zu arbeiten zu beginnen . Die Sache ist, dass ich mit AJAX und JS überhaupt nicht gut bin. Also habe ich eine Ansicht erstellt, die die Anfrage von der Ajax-Form erhält (vorerst gibt sie nur alle Kurse zurück, keine Filterung). Das Problem, das ich habe, ist, dass, wenn ich die Universität auswähle, dann die course Auswahl leer wird. Also ich denke, es bekommt nicht die Daten aus der Sicht. Wenn Sie einen Blick haben ..

Ansicht

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

So, nachdem ich eine Universität auswählen, die Auswahl natürlich Quellcode ist wie dies:

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

Was bedeutet, dass ich die Daten bekomme, aber ich muss etwas HTML hinzufügen? Wie <li>...</li>?

Answer 1

Dies würde ein paar Schritte erfordern, aber es sieht einschüchternder aus, als es tatsächlich ist.

Erstellen Sie zuerst eine neue Ansicht, die Ihre Ajax-Anfrage erhält und die richtigen Auswahlmöglichkeiten entweder als HTML oder JSON zurückgibt.

Dann legen Sie die Ajax-Anfrage mit der jQuery ajax function zu feuern, wenn University-Auswahlfeld ändert.

Hier ist ein einfaches Beispiel, um zu versuchen, Ihnen zu helfen loszulegen: ...

$("#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); 
     }); 

Ich hoffe, das hilft ein wenig. Viel Glück.

EDIT: In Ihrem Update erstellen Sie ein JSON in Ihrer Ansicht, aber HTML mit Ajax anfordern. Erstellen Sie den HTML-Code anstelle von json als String und rendern Sie ihn als einzigen Inhalt Ihrer Vorlage.

So etwas wie dies in der Ansicht:

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

Sie diese Aufgabe auf der Client-Seite mit Javascript ausführen könnte die JSON-Daten, aber ich denke, es ist einfacher und erfordern weniger Datentransfer in der Handhabung Aussicht.