Django/jQuery Cascading Select Boxes?

by

Here is my solution. It uses the undocumented Form method _raw_value() to peek into the data of the request. This works for forms, which have a prefix, too.

class CascadeForm(forms.Form):
    parent=forms.ModelChoiceField(Parent.objects.all())
    child=forms.ModelChoiceField(Child.objects.none())

    def __init__(self, *args, **kwargs):
        forms.Form.__init__(self, *args, **kwargs)
        parents=Parent.objects.all()
        if len(parents)==1:
            self.fields['parent'].initial=parents[0].pk

        parent_id=self.fields['parent'].initial or self.initial.get('parent') \
                  or self._raw_value('parent')
        if parent_id:
            # parent is known. Now I can display the matching children.
            children=Child.objects.filter(parent__id=parent_id)
            self.fields['children'].queryset=children
            if len(children)==1:
                self.fields['children'].initial=children[0].pk

jquery Code:

function json_to_select(url, select_selector) {
/*
 Fill a select input field with data from a getJSON call
 Inspired by: http://stackoverflow.com/questions/1388302/create-option-on-the-fly-with-jquery
*/
    $.getJSON(url, function(data) {
    var opt=$(select_selector);
    var old_val=opt.val();
        opt.html('');
        $.each(data, function () {
            opt.append($('<option/>').val(this.id).text(this.value));
        });
        opt.val(old_val);
        opt.change();
    })
}


   $(function(){
     $('#id_parent').change(function(){
       json_to_select('PATH_TO/parent-to-children/?parent=" + $(this).val(), "#id_child');
     })  
    });

Callback Code, which returns JSON:

def parent_to_children(request):
    parent=request.GET.get('parent')
    ret=[]
    if parent:
        for children in Child.objects.filter(parent__id=parent):
            ret.append(dict(id=child.id, value=unicode(child)))
    if len(ret)!=1:
        ret.insert(0, dict(id='', value="---"))
    return django.http.HttpResponse(simplejson.dumps(ret), 
              content_type="application/json")

More Related Contents:

  1. Django Forms: if not valid, show form with error message
  2. Applying bootstrap styles to django forms
  3. Setting the selected value on a Django forms.ChoiceField
  4. How to update an object from edit form in Django?
  5. Django ModelChoiceField: filtering query set and setting default value as an object
  6. Django ModelForm: What is save(commit=False) used for?
  7. Inline Form Validation in Django
  8. Django: How to get current user in admin forms?
  9. Initial populating on Django Forms
  10. How do I add a Foreign Key Field to a ModelForm in Django?
  11. Django form with choices but also with freetext option?
  12. Add class to form field Django ModelForm
  13. Django forms request.user
  14. How can I restrict Django’s GenericForeignKey to a list of models?
  15. Dropdown in Django Model
  16. Grouped CheckboxSelectMultiple in Django template
  17. Django – Overriding the Model.create() method?
  18. How to set css class of a label in a django form declaration?
  19. resize image on save
  20. Django’s forms.Form vs forms.ModelForm
  21. Django, ModelChoiceField() and initial value
  22. Django Forms: pass parameter to form
  23. Using AuthenticationForm in Django
  24. ModelForm with OneToOneField in Django
  25. How to limit file types on file uploads for ModelForms with FileFields?
  26. Django: access the parent instance from the Inline model admin
  27. Django – forms.FileField() initial value
  28. Get type of Django form widget from within template
  29. How do you change the default widget for all Django date fields in a ModelForm?
  30. Saving Many To Many data via a modelform in Django

Leave a Comment