Question

How do pass back values to a form that was posted to the server using Ajax?

In the view (shown below), I am just returning a simple data structure to test things:

def detail(request, widget_id):

    widget = get_object_or_404(Widget, pk=widget_id)

    if request.method == 'POST':
        form = WidgetDetailsForm(request.POST, instance=widget)
        if form.is_valid():
            form.save()
            return HttpResponseRedirect(request.path)  # Redirect after POST
        else:
            if request.is_ajax():
                response_dict = {
                    'page': 1,
                    'total': 2,
                    'rows': 3
                }
                json = simplejson.dumps(response_dict)
                return HttpResponse( json, mimetype='application/json')

    else:
        form = WidgetDetailsForm(instance=widget)

    params = {}
    params['widget'] = widget
    params['form'] = form
    return render_to_response('widgets/detail.html', params,
                              context_instance=RequestContext(request))

The JavaScript in the template is:

<script type="text/javascript">
    /* <![CDATA[ */
        // Wait for the DOM to be loaded
        $(document).ready(function() {
            // Bind 'myForm' and provide a simple callback function.
            $('#updateform').wl_Form({
                onSuccess: function(data, status){
                    alert(data);
                    alert(data.page);
                    alert(data.rows);
                    alert(data.total);
                },
                "status": false,
                "confirmSend": false
            });
        });
    /* ]]> */
</script>

I get the following from the alert statements.

{"rows": 3, "total": 2, "page": 1}
undefined
undefined
undefined

Why does data.page, data.rows, and data.total return undefined?

Answer 1

Because data is a string (of JSON) – note the output of your first alert().

Try something like:

$('#updateform').wl_Form({ 
    onSuccess: function(response, status){
        var data = $.parseJSON(response); 
        alert(data);
        alert(data.page);
        //...
    }
});