Saturday, January 28, 2012

Hierarchical Django Ajax Forms

I needed to build a form where the user can input a geographical
location, with fields for country, state, city, neighborhood. I
wanted the form to use AJAX, so that the only valid fields would
appear as the user selected fields higher in the hierarchy.

It sounded like a task that should be easy to automate, but I didn't
find anything that quite did it online. A lot of examples on how to
do it, that involved writing a bunch of handlers manually.

Here's my attempt, it makes it pretty easy to apply to any set of
hierarchical data. So if you want to apply this to a set of models
for (Model Year, model, make, trim), or (kingdom, phylum, class,
order, family, genus, species), it should be pretty simple. The steps
to create the form would be:

1. Define a model representing your form. The model should contain
foreign keys to models in your hierarchical data set. However,
instead of using the django ForeignKey field, use
hierform.fields.HierarchicalForeignKey.

2. Defined a form that uses your model, but inherit from
hierform.fields.hierarchicalForm instead the django ModelForm.

3. Add a view to handle all the form requests. This view needs three
sections.
i. You need to handle POST request to handle form submission.
This is the same as normal Django form submission.
ii. For generating the form, instead of just using the form class
to create the form, use a utility function from this package
ajaxRequest(request.GET). In the usual case, request.GET is empty and
this call instantiates a normal unbound instance of the form that you
can render into a template to display.
iii. If request.GET contains AJAX form submission fields from your
hierarchical data set, ajaxRequest(request.GET) will generate a small
HTML snippet that contains only the updated select fields. In this
case, you want to deliver this snippet straight back to the web page,
without the rest of your HTML template.

4. Add a view to deliver the Javascript to your form. Really all this
does is inject the html tag location of your form, and the URL of your
form into a template containing the javascript.

Source for a demo, and a more descriptive readme are here:
https://github.com/dragonx/django-hier-ajax-form

I'm pretty new to python/django. If any experienced developer has
time to take a look I'd love some feedback, especially if I'm using
any poor coding practices for Django.

This is also my first time contributing anything open source. If
there's a better way to make this available, or if you use it and want
to contribute an improvement, or want to set up a live demo for me,
please let me know.

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To post to this group, send email to django-users@googlegroups.com.
To unsubscribe from this group, send email to django-users+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/django-users?hl=en.

No comments:

Post a Comment