Faking Javascript with Python

I needed a web form featuring 2 pulldown select lists. The options available in the 2nd pulldown would change based on the user’s selected option in the 1st pulldown. The lazyweb helped, and my final JS functions are a combination of techniques gleaned from “onChange in Select Form Elements” and “Changing Select Element Content on the Fly“.

I suppose it’s pretty effortless to conclude that I’m not much of a Javascript coder. I know just enough to get myself in trouble, but not enough to be productive.

I needed to arrange the data from the database into global arrays so the JS functions would actually work, but the Javascript needed to remain data-agnostic because the data itself will change. That, of course, means no hard-coding.

So, when it came time to try to learn how to create and modify multiple (global) arrays for use in the pulldowns, I ended up running into a number of dead-ends… the results of my shot-in-the-dark attempts and overall ignorance of “doing things the Javascript way”.

So I faked it using Python.

I pull the info in from the database, and use string substitution to drop in the necessary declarations at the top of the script as it’s being delivered to the web browser. For example, the data coming in from the database may look like this (in Python):

data = {'Category_1': ['Option_1', 'Option_2', 'Option_3'], 'Category_2': ['Option_4', 'Option_5', 'Option_6']}

I construct a new Python list for each Category, pull a join(), and drop it into a string that is syntactically correct for Javascript, which then gets pushed into a master list:

master_list = []
for category in data.keys():
    category_list = []
    for option in data[category]:
        category_list.append('"%s"' % (option))
    javascript_line = 'var %s = new Array(%s);' % (category, ','.join(category_list))
    master_list.append(javascript_line)

Then, when it comes time to write the Javascript header (I’m using Webware for Python), I simply do a join() on the master list and drop ’em in:

self.writeln('''
<script type="text/javascript">
<!--

%s

function swapOptions(the_array_name, target_pulldown_name) {
...

//-->
</script>''' % ('\r'.join(master_list)))

Which delivers the proper dynamically-created, apparently-hard-coded arrays to the browser:

<script type="text/javascript">
<!--

var Category_1 = new Array("Option_1", "Option_2", "Option_3");
var Category_2 = new Array("Option_4", "Option_5", "Option_6");

function swapOptions(the_array_name, target_pulldown_name) {
...

It works.

Check out the final Javascript functions in action (with sample arrays)
.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s