If it won't be simple, it simply won't be. [Hire me, source code] by Miki Tebeka, CEO, 353Solutions

Wednesday, March 11, 2009

glue


Sometime you need to produce a quick prototype for a site that is an aggregation of several other sites.

One quick way is to glue the parts you want from each site into the page.
We'll use a more relaxed version of trampoline to overcome cross site scripting.

redirect.cgi

#!/usr/bin/env python
'''Get content of "foreign" web pages, enable cross-site AJAX'''

from urllib2 import urlopen, URLError
from cgi import FieldStorage

if __name__ == "__main__":
import cgitb; cgitb.enable()

form = FieldStorage()
url = form.getvalue("url", "")
if not url:
raise SystemExit("no url")

try:
o = urlopen(url)
except (URLError, ValueError), e:
raise SystemExit("error: %s" % e)

print "Content-type: %(content-type)s\n" % o.headers
print o.read()
And then in our page we'll glue the parts. I'm using the same part from Weather Underground but with different area. (Ignoring the fact they have a good API :)

index.html

<html>
<head>
<title></title>
<style>
h1.title {
text-align: center;
}
.header {
background: blue;
color: white;
font-size: 1.3em;
font-weight: bold;
font-variant: small-caps;
}
div.left {
float: left;
width: 50%;
height: 400px;
overflow: auto;
}
div.right {
float: right;
width: 50%;
height: 400px;
overflow: auto;
}
</style>
</head>
<body>
<h1 class="title">Weather Meshup</h1>

<div>
<div class="left">
<div class="header">Beverly Hills</div>
<div id="bh">Loading ...</div>
</div>

<div class="right">
<div class="header">New York</div>
<div id="ny">Loading ...</div>
</div>
</div>
<div>
<div class="left">
<div class="header">Chicago</div>
<div id="ch">Loading ...</div>
</div>

<div class="right">
<div class="header">Washington</div>
<div id="wa">Loading ...</div>
</div>
</div>
</body>
<script src="jquery.js"></script>
<script>
function weather_url(zipcode) {
return 'http://www.wund.com/cgi-bin/findweather/getForecast' +
'?query=' + zipcode;
}

function load_foreign(id, url, selector) {
$('#' + id).load('redirect.cgi ' + selector, {url: url});
}

function load_weather(id, zipcode) {
var url = weather_url(zipcode);
load_foreign(id, url, 'div#conditions');
}


function on_ready()
{
load_weather('bh', '90210');
load_weather('ny', '10001');
load_weather('ch', '60290');
load_weather('wa', '20001');
}

$(document).ready(on_ready);
</script>
</html>
Post a Comment

Blog Archive