Re-accessing python variables AFTER initial html get() call

Question

I am making a data-plotting tool using google app engine and google docs/gdata and have run into a python/js/html communication issue.

I want a very simple layout for the webpage -- just a series of dropdown menu sections and then the final graphs. My current dilemma involves the dropdown menus.

There are total of 4 dropdown menus, and the fields of each one depends on the previous selection. I have found JS/HTML code that has all of the needed logic, but it assumes that you have pre-loaded all of the selection fields. Due to the scale of the project, it is impossible to load everything on start-up, and the data is dynamic/changing, so I can't just declare static files with the menu selection data contained.

Currently, I have methods to get all of the menu selections/data I need from google docs (using gdata). Ideally, I would like to just call each one in series (html selection1 -> python method1 to get next selection set -> html selection2 -> python method2 to get next selection set-> etc) but from what I can gather it seems this is not possible (return to python, ie 'post', without reloading the entire page).

So, is there a way to access python variables/methods in a google-app-engine JS code AFTER the initial template render or without 'posting'? Or, more open-endedly, if anyone has insight/suggestions/ideas I'd appreciate it.

Thanks

Answer 1

Two step process:

1. Create some server side code to return your data as JSON - the defacto method of transferring data on the web.

2. In your javascript code, call your server (from step 1) and then parse the result. Use the result to populate your dropdown.

The good news is that Google already provides json as an alternate format for their gdata APIs. See this link for a primer on how to use gdata and return JSON.

For the second part, almost all javascript client side libraries (and you really should be using one) provide an easy way to request data using ajax. As this is a common task, there are plenty of questions on StackOverflow on this - this one in particular has an example that shows you how to populate a dropdown using jquery and ajax.

Assuming you can use javascript and replicate whatever functionality your Python code is providing, the above will work for you. If you have some specific logic that you don't want to transfer to the client side, then your Python code will have to return json (in effect, you would be acting like the gdata api for your javascript code).

Since you didn't highlight which Python framework you are using - here is an example using flask, a simple framework for Python web development:

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/the-question')
def the_answer():
    return jsonify(answer=42)

A more comprehensive example is available in the documentation under AJAX with jQuery.

If you are using webapp2, Google provides excellent documentation to do the same thing.