You might need to use the following technologies:
- Custom Django Form Fields (Within the model form)
- ajax(to fetch the records)
- simplejson(to send a json response to ajax)
- jquery(to update the combo boxes on client side)
Let's have a look at an example(Not really tested this, just from the top of my mind):
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')
Now, write a method in your views that returns a json object for schools under a campus and centres under a school:
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")
Now write a ajax/jquery method to fetch the data and populate the select elements in the 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;
})
});
Selectis the default widget anyway, you don't need to declare it. Obviously the Schools are related with Campuses with a Foreign key, based on the OP's description. – Communal