I created a script that utilized Prototype's AJAX methods to fetch Twitter data in JSON format, process it, and display it within a div. The script was functioning perfectly during testing on Safari 4.0.3 on an OS 10.6.1 machine. However, when I uploaded the script to a server, it stopped working. Despite having all client-side components and referencing the same Prototype.js file, I couldn't identify why it was functional locally but not remotely.
To troubleshoot, I simplified the script to its core functionality - displaying the latest tweet from my timeline in an alert box. The issue persisted, both on the server and in Firefox. I acknowledge that there might be a fundamental error in my approach, but I'm unable to pinpoint it.
Below is the complete code snippet of my page. It functions locally but experiences issues on the server and in Firefox:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
<script type="text/javascript" charset="utf-8">
document.observe("dom:loaded", function(){
var tweetAddress = "http://twitter.com/status/user_timeline/hellbox.json?count=1";
new Ajax.Request( tweetAddress, {
method: 'get',
onSuccess: function (transport) {
var tweets = transport.responseText.evalJSON();
alert(tweets[0].text);
}
});
});
</script>
</head>
<body>
</body>
</html>