submissions - jquery python ajax tutorial

¿Cómo obtener listas desplegables interdependientes en django usando Modelform y jquery?

Question

Soy nuevo en django y jquery. Estoy trabajando en una aplicación basada en django donde tengo 3 menús desplegables en un formulario. 1. Campus 2. Escuela 3. Centro

La jerarquía es que los campus tienen escuelas y las escuelas tienen centros. Quiero relacionar estos menús desplegables.

Por ejemplo, tengo 3 campus, digamos Campus1, Campus2, Campus3. Si selecciono Campus1, solo debería seleccionar escuelas en el campus1 y, si continúo, si selecciono School1, entonces debo poder seleccionar centros de School1 y todas las demás opciones deben ocultarse.

He buscado en la red y he intentado esto http://blog.devinterface.com/2011/02/how-to-implement-two-dropdowns-dependent-on-each-other-using-django-and-jquery/ pero no parece funcionar para mi También he comprobado este http://www.javascriptkit.com/script/script2/triplecombo.shtml, pero dado que estoy usando ModelForm para crear formularios, esto no se ajusta a mis necesidades.

Por favor, guíame para hacer esto.

Gracias

Answer 1

En lugar de reinventar la rueda, usaría Django Smart Selects o Django Autocomplete Light

Todavía no lo he intentado pero estoy a punto de usar uno o ambos en un próximo proyecto.

Answer 2

Es posible que necesite usar las siguientes tecnologías:

• Campos de formulario de Django personalizados (dentro del formulario modelo)
• ajax (para buscar los registros)
• simplejson (para enviar una respuesta json a ajax)
• jquery (para actualizar los cuadros combinados en el lado del cliente)

Echemos un vistazo a un ejemplo (No lo he probado realmente, solo desde lo más alto de mi mente):

Models.py

from django.db import models

class Campus(models.Model):
    name = models.CharField(max_length=100, choices=choices.CAMPUSES)

    def __unicode__(self):
        return u''%s'' % self.name

class School(models.Model):
    name = models.CharField(max_length=100)
    campus = models.ForeignKey(Campus)

    def __unicode__(self):
        return u''%s'' % self.name

class Centre(models.Model):
    name = models.CharField(max_length=100)
    school = models.ForeignKey(School)

    def __unicode__(self):
        return u''%s'' % self.name

Forms.py

import models
from django import forms

class CenterForm(forms.ModelForm):
    campus = forms.ModelChoiceField(queryset=models.Campus.objects.all())
    school = forms.ModelChoiceField(queryset=models.School.objects.none()) # Need to populate this using jquery
    centre = forms.ModelChoiceField(queryset=models.Centre.objects.none()) # Need to populate this using jquery

    class Meta:
        model = models.Center

        fields = (''campus'', ''school'', ''centre'')

Ahora, escriba un método en sus vistas que devuelva un objeto json para escuelas bajo un campus y centros bajo una escuela:

Views.py

import models
import simplejson
from django.http import HttpResponse

def get_schools(request, campus_id):
    campus = models.Campus.objects.get(pk=campus_id)
    schools = models.School.objects.filter(campus=campus)
    school_dict = {}
    for school in schools:
        school_dict[school.id] = school.name
    return HttpResponse(simplejson.dumps(school_dict), mimetype="application/json")

def get_centres(request, school_id):
    school = models.School.objects.get(pk=school_id)
    centres = models.Centre.objects.filter(school=school)
    centre_dict = {}
    for centre in centres:
        centre_dict[centre.id] = centre.name
    return HttpResponse(simplejson.dumps(centre_dict), mimetype="application/json")

Ahora escriba un método ajax / jquery para recuperar los datos y llenar los elementos select en el HTML.

AJAX / jQuery

$(document).ready(function(){
    $(''select[name=campus]'').change(function(){
        campus_id = $(this).val();
        request_url = ''/get_schools/'' + campus_id + ''/'';
        $.ajax({
            url: request_url,
            success: function(data){
                $.each(data, function(index, text){
                    $(''select[name=school]'').append(
                         $(''<option></option>'').val(index).html(text)
                     );
                });
            }
        });
        return false;
    })
});