Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Example of widget using the JSONP feed from the new status.ox website. Status is refreshed every 60 seconds.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Status - University of Oxford</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
.status_code_0 {background-color:#039b0b;}
.status_code_1 {background-color: #b94a48;}
.status_code_2 {background-color: #f89406;}
li {padding:0.5em; margin:0.5em; list-style:none; width:20em; font-size:1.3em;}
.label {font-weight:bold;}
a {color:#FFF; text-decoration:none;}
.footer {font-size: 0.8em; margin-left:5em;}
h1 {color:#002147; margin-left:0.5em;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<!-- ACTUAL CODE for this example below -->
<script type="text/javascript">
var callback = function (data) {
var services = [];
$.each(data.groups, function(key, val) {
services.push('<li class="status_code_' + val.status_code + '"><a href="http://status.ox.ac.uk/"><span class="label">' + val.name + ':</span> ' + val.status_name + '</a></li>');
});
$('body').empty();
$('body').append('<h1>Status - University of Oxford</h1>');
$('<ul/>', {'id': 'services', html: services.join('')}).appendTo('body');
$('#services').after('<p class="footer">Last Updated: ' + data.last_updated+'</p>');
};
var updateFeed = function () {
$.ajax({
url: "http://status.ox.ac.uk/api/services.jsonp",
type: "get",
dataType: "jsonp",
jsonp: "callback",
cache: false,
success: callback,
});
}
updateFeed(); // run one time then will be called again every
window.setInterval(updateFeed, 60000); // 1 minute
</script>
</head>
<body>
<noscript>Needs Javascript!</noscript>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment