Question

I’m trying to create a page with two functional parts:

• a form which the user fills and submits many times
• a chart which updates every time the user submits the form

I’m using django forms and jQuery and I can’t quite figure out how the design fits together.
Upon submission of the form one of two things should happen, either the chart (and only the chart) updates or, if there is a form validation error, the form section should update with the appropriate error messages. So actually one Ajax call should update either part.
I’d like only the relevant div to update (either form or chart) instead of the entire page which includes the other div, a logo and other static graphics.

One of the challenges is that if the form sumbission went well, I’d like to return a JSON object which updates the chart, as I’m using a 3rd party charting package, however if the submission failes the returned content should be an HTML response with the updated form.

What would be a correct pattern for the django view for this behavior?
What would be a correct javascript\jQuery pattern for this behavior?
If this approach is not correct, what would be an alternative approach?

Answer 1

You need JavaScript. For example, with jQuery:

$('form').submit(function() {
    $.post($(this).attr('action'), $(this).serialize(), function(data, textStatus, jqXHR){
        if (typeof data == 'object') {
            // json was returned, update the chart with the json
        } else {
            // the form had error, the form's html was returned
            $('form').html(data);
        }
    })
})

You can have such a python view:

from django.utils import simplejson
from django import shortcuts

def chart_form(request):
    template_full = 'chart_full.html' # extends base.html etc ..
    template_form = 'chart_form.html' # just the form, included by chart_full.html

    if request.method == 'POST':
        form = formClass(request.POST) 
        if form.is_valid():
            // do your chart_data
            chart_data = ....
            return http.HttpResponse(simplejson.dumps(chart_data), mimetype='application/json')
    else:
        form = formClass()

    if request.is_ajax():
        template_name = template_form
    else:
        template_name = template_full

    return shortcuts.render(template_name, {'form': form}, request)

Note: that won’t work if your form contains file fields. In that case, rely on this plugin: http://jquery.malsup.com/form/ (function ajaxSubmit)