How to submit a form in a POST request using JavaScript

I was working on a Django project a couple of days ago where I needed to use JavaScript to submit a form in a POST request.  The response of this request is a PDF file generated with ReportLab.  I wanted the browser to prompt the user to download the file or open it in the browser in another window.

I was trying to do this with AJAX at first, but apparently you’re not really supposed to do downloads within an AJAX call (I’m a complete JavaScript newbie).  It would return the actual content of the file as if you opened it with a text editor.  I’ve found ‘tricks’ online to make the browser open the file in the proper format, like this example below:

generateReportPdf: function(url) {
    var exportForm = $('form#export-form');

    $.ajax({
        url: url,
        type: 'POST',
        data: exportForm.serialize(),
        success: function(data) {
             window.open('data:application/pdf,' + escape(data));
	}
    });
}

But this won’t work with all browsers.  It works with Firefox but probably won’t work with Internet Explorer, so this is not really a good solution.

I ended up just having to do a regular form submission instead.  I found this example below on StackOverflow and works quite well:

function post_to_url(path, params, method) {
    method = method || 'POST';

    var form = document.createElement('form');

    // Move the submit function to another variable
    // so that it doesn't get overwritten.
    form._submit_function_ = form.submit;

    form.setAttribute('method', method);
    form.setAttribute('action', path);
    form.setAttribute('target', '_blank');

    for(var key in params) {
        var hiddenField = document.createElement('input');
        hiddenField.setAttribute('type', 'hidden');
        hiddenField.setAttribute('name', key);
        hiddenField.setAttribute('value', params[key]);

        form.appendChild(hiddenField);
    }

    document.body.appendChild(form);
    form._submit_function_(); // Call the renamed function.
}

How to convert a string to a dictionary in Python

I just found out about this today while working on a Django app. I have some data stored in a database as a string but the structure is a dictionary and I wanted to retrieve it as a dictionary object.

Instead of parsing this data to retrieve the keys and values myself, it turned out Python has a module called ast (Abstract Syntax Trees) that can take care of this, specifically the literal_eval() function:

>>> import ast
>>> data = "{'user': 'bob', 'age': 10, 'grades': ['A', 'F', 'C']}"
>>> ast.literal_eval(data)
{'age': 10, 'grades': ['A', 'F', 'C'], 'user': 'bob'}
>>> user = ast.literal_eval(data)
>>> user['age']
10
>>> user['grades']
['A', 'F', 'C']
>>> user['user']
'bob'

Source: http://stackoverflow.com/questions/988228/converting-a-string-to-dictionary

GWT, Django, and JSON (with padding)

A couple of months ago I was working on a project where I needed to retrieve data in JSON format from a web service written in Python (using the Django web framework) under GWT.  The data is then loaded into GXT/Ext GWT grids and charts.

After looking at a GXT example of loading JSON data to a grid, I thought this would be pretty straightforward, but of course I was wrong.  Since the Django app is on a different server and domain/subdomain, I learned something called “same origin policy“, preventing our two applications to communicate with each other.

Fortunately, there’s an easy workaround to this using “JSON with padding” or JSONP.  Here’s one way to get this working:

GWT side:

1.  The JsonpRequestBuilder object has been added in GWT 2.0 making these types of cross site requests easier to implement.  Here’s a very well written post showing how to do this (yes, I’m lazy and he obviously knows a lot more about these than I do ).

Now, when you make a request to the web service on the Django side, it will automatically append the callback function in the request and the request may look something like this:

GET /get_gpu_stats/?callback=__gwt__jsonp__.I18.onSuccess HTTP/1.1

Django side:

1.  In your Django view, one way to handle this is to inspect the request and see if there’s a parameter called “callback” and change the response so it looks like a function (this is the “padding” part) instead of a regular JSON response.  You can do something like this (forgot where I found this example from):

def get_gpu_stats(request):
    .
    .
    .
    gpu_stats = {'gpu_stats': data}
    response = simplejson.dumps(gpu_stats)

    # Return as JSONP if the callback parameter is specified.
    callback = request.GET.get('callback')
    if callback:
        response = '%s(%s)' % (callback, response)
    return HttpResponse(response, mimetype='application/json')

Yup, that’s it, they should now be able to exchange data!