Lo que tienes que hacer es crear el formulario con tus tres tablas, luego usando AJAX y jQuery consultar dinámicamente los modelos de acuerdo a la opción que el usuario ha seleccionado.
Primero, el formulario. Observa que en el queryset
de cada ModelChoiceField
estoy usando un all()
, esto es necesario para que se pueda escoger una opción válida al momento de usar AJAX para filtrar los resultados.
forms.py:
from django import forms
from .models import Estado, Municipio, Localidad
class UbicacionForm(forms.Form):
estado = forms.ModelChoiceField(
label=u'Estado',
queryset=Estado.objects.all()
)
municipio = forms.ModelChoiceField(
label=u'Municipio',
queryset=Municipio.objects.all()
)
localidad = forms.ModelChoiceField(
label=u'Localidad',
queryset=Localidad.objects.all()
)
def __init__(self, *args, **kwargs):
super(UbicacionForm, self).__init__(*args, **kwargs)
self.fields['municipio'].queryset = Municipio.objects.none()
self.fields['localidad'].queryset = Localidad.objects.none()
En la vista, tendrías algo como esto.
views.py:
from django.core.urlresolvers import reverse
from djabgo.http import HttpResponseRedirect
from django.shortcuts import render
from .forms import UbicacionForm
from .models import Municipio, Localidad
def vista_ubicacion(request):
form = UbicacionForm()
if request.method == 'POST':
form = UbicacionForm(request.POST)
if form.is_valid():
# Guardar los datos
url = reverse('home')
return HttpResponseRedirect(url)
return render(request, 'template.html', {
'form': form
})
Creamos las funciones que recibirán los filtros vía AJAX, estas funciones son las que deberán ser llamadas desde tu template.
ajax.py:
from django.http import JsonResponse
from .models import Localidad, Municipio
def get_municipios(request):
estado_id = request.GET.get('estado_id')
municipios = Municipio.objects.none()
options = '<option value="" selected="selected">---------</option>'
if estado_id:
municipios = Municipio.objects.filter(estado_id=estado_id)
for municipio in municipios:
options += '<option value="%s">%s</option>' % (
municipio.pk,
municipio.municipio
)
response = {}
response['municipios'] = options
return JsonResponse(response)
def get_localidades(request):
municipio_id = request.GET.get('municipio_id')
localidades = Localidad.objects.none()
options = '<option value="" selected="selected">---------</option>'
if municipio_id:
localidades = Localidad.objects.filter(municipio_id=municipio_id)
for localidad in localidades:
options += '<option value="%s">%s</option>' % (
localidad.pk,
localidad.localidad
)
response = {}
response['localidades'] = options
return JsonResponse(response)
Ya que hemos agregado funciones nuevas, necesitamos crear la ruta hacia esas funciones AJAX actualizando las URLs.
urls.py:
from django.conf.urls import url
from .ajax import get_municipios, get_localidades
urlpatterns = [
url(r'^ajax/get_municipios/$', get_municipios, name='get_municipios'),
url(r'^ajax/get_localidades/$', get_localidades, name='get_localidades'),
# ...
]
Ahora, necesitamos que cuando se seleccione un estado, se filtren los municipios, y que cuando se seleccione un municipio, se filtren las localidades. Esto lo tenemos que definir en el template (o en un archivo JavaScript importado en tu template) mediante un <script></script>
.
template.html:
<body>
<form method="POST">
{% csrf_token %}
<div>
{{ form.estado.label_tag }}
{{ form.estado }}
</div>
<div>
{{ form.municipio.label_tag }}
{{ form.municipio }}
</div>
<div>
{{ form.localidad.label_tag }}
{{ form.localidad }}
</div>
<button type="submit">Guardar</button>
</form>
<script type="text/javascript">
$(document).ready(function() {
$("#id_estado").on("change", getMunicipios);
$("#id_estado").on("change", getLocalidades);
});
function getMunicipios() {
var estadoId = $("#id_estado").val();
if (estadoId) {
// Eliminamos las opciones anteriores del select
$("#id_municipio").html("");
var request = $.ajax({
type: "GET",
url: "{% url 'get_municipios' %}",
data: {
"estado_id": estadoId,
},
});
request.done(function(response) {
// Agregamos los resultados al select
$("#id_proceso").html(response.municipios);
$("#id_localidad").html("<option value='' selected='selected'>---------</option>");
$("#id_municipio, #id_localidad").trigger("change");
});
} else {
$("#id_municipio").html("<option value='' selected='selected'>---------</option>");
$("#id_localidad").html("<option value='' selected='selected'>---------</option>");
$("#id_municipio, #id_localidad").trigger("change");
}
}
function getLocalidades() {
var municipioId = $("#id_municipio").val();
if (municipioId) {
// Eliminamos las opciones anteriores del select
$("#id_localidad").html("");
var request = $.ajax({
type: "GET",
url: "{% url 'get_localidades' %}",
data: {
"municipio_id": municipioId,
},
});
request.done(function(response) {
// Agregamos los resultados al select
$("#id_localidad").html(response.localidades);
$("#id_localidad").trigger("change");
});
} else {
$("#id_localidad").html("<option value='' selected='selected'>---------</option>");
$("#id_localidad").trigger("change");
}
}
</script>
</body>