blog.utek.pl Me, Myself and I

Dynamic filters in Django forms

Filtering one field by another in django forms.
Using jQuery.

Form Model:

class MyModelForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super(self.__class__, self).__init__(*args, **kwargs)
        if self['fieldToFilterWith'].data:
            self.fields['fieldToFilter'].queryset = MyModel2.objects.filter(fieldToFilterWith__id=int(self['fieldToFilterWith'].data))
        else:
            self.fields['fieldToFilter'].queryset = MyModel2.objects.none()
    class Meta:
        model = MyModel
        exclude = ("modifier", "adder", "added", "visible")
    class Media:
        js = ("js/plugins/dChoice.js",)

View that returns filtered list:

def get_filtered_list(request, fieldToFilterWith_id):
    regions = MyModel2.objects.filter(fieldToFilterWith__id=fieldToFilterWith_id)
    return HttpResponse(serializers.serialize("json", regions, fields=("name",)), mimetype="application/json")

urls.py for view:

url(r'feed/d/(\d+)/$', 'myapp.views.get_filtered_list', name='feed_get_filtered_list'),

jQuery plugin - js/plugins/dChoice.js:

(function($){
    $.fn.extend({
        dChoice: function(options) {
            var defaults = {
                url: '',
                field: ''
            };
            var o =  $.extend(defaults, options);
            return this.each(function(){
                var parent = this;
                $("#"+o.field).change(function(){
                    var id_c = $(this).val();
                    $.getJSON(o.url + id_c + "/", function(data){
                        $(parent).html("");
                        $(parent).append($("


").attr("value","").text("---------"));
                        for (elem in data){
                            $(parent).append($("


").attr("value",data[elem].pk).text(data[elem].fields.name));
                        }
                    });
                })
            });
        }
    });
})(jQuery);

Form template:

{% block scripts %}
{{ form.media }}

{% endblock %}
{% block content %}

    {{ form.as_p }}



{% endblock content %}