Django, ajax compila il modulo con i dati del modello

Question

Quindi ho ottenuto un semplice modulo di registrazione. In questa forma ci sono altri 3 campi:

• Università
• Corso
• modulo

Quello che sto cercando di fare è quello di filtrare i dati. Quindi, quando l'utente seleziona un'università, il campo del corso (seleziona) mostrerà tutti i corsi che appartengono a questa università. Anche quando l'utente seleziona un corso, il campo modulo (seleziona) mostrerà tutti i moduli che appartengono a questo corso. Se controlli l'immagine, vedrai che è piuttosto semplice.

Sono riuscito a mostrare tutte le università, corsi e moduli ma ciò non è pratico poiché i dati non sono corretti (mostra tutte le voci). So come filtrare il queryset ma non so come usare AJAX per farlo. Ho provato molti tutorial ma non sono riuscito a trovare qualcosa, quindi mi dispiace non aver pubblicato il codice.

Se mi si può puntare al tutorial destra, ad esempio o darmi qualche codice per iniziare a lavorare su di esso ...

UPDATE ho usato l'esempio di Del per iniziare a lavorare su di esso . Il fatto è che non sono affatto bravo con AJAX e JS. Così ho creato una vista che riceve la richiesta dal modulo Ajax (per ora restituisce solo tutti i corsi, nessun filtro). Il problema che sto avendo è che quando seleziono l'università, la selezione course diventa vuota. Quindi immagino che non ottenga i dati dalla vista. Se si può avere uno sguardo ..

vista

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

Così, dopo seleziono un'università, il selezionare il codice sorgente di corso è come this:

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

Ciò significa che sto ricevendo i dati ma devo aggiungere un po 'di html? Mi piace <li>...</li>?

Answer 1

Ciò richiederebbe alcuni passaggi per eseguire, ma sembra più intimidatorio di quello che è in realtà.

Per prima cosa creare una nuova vista che riceverà la richiesta ajax e restituirà le opzioni di selezione corrette come HTML o JSON.

Quindi impostare la richiesta Ajax utilizzando jQuery ajax function per attivare quando la casella di selezione Università cambia.

Ecco un semplice esempio per cercare di aiutarti a iniziare: ...

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

Spero che questo aiuta un po '. Buona fortuna.

MODIFICA: Nel tuo aggiornamento, stai creando un json nella tua vista, ma richiedendo html con ajax. Invece di json, crea l'html come stringa e rendilo come unico contenuto del tuo modello.

Qualcosa di simile a suo avviso:

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

è possibile eseguire questa operazione con javascript sul lato client utilizzando i dati JSON, ma penso che sia più facile e richiede meno il trasferimento di dati da gestire nel vista.