I'm using mootool's Request.JSON to retrieve tweets from Twitter. After I receive it, I write to the .innerHTML property for my target div. When I test this locally as a file, i.e. file:// is in the URL, I see my formatted tweets on the webpage. When I serve this from my local webserver, i.e. http://, the formatted tweets are not showing up in my div.
What could be causing this? (I've tested this in Safari and Chrome on OSX...same behavior) I've included the code that's from the HEAD section of my page. Also, when I debug the Javascript in Safari:
"TypeError: Result of expression 'data' [undefined] is not an object" appears for the onComplete callback function declaration.
<script type="text/javascript" src="js/mootools-1.3-full-compat.js"></script>
<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
<script type="text/javascript" src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js"></script>
<script type="text/javascript">
var jSonRequest = new Request.JSON(
{
url:'http://search.twitter.com/search.json?q=+nytimes+OR+TheEconomist',
onSuccess: function(data) {
var target = document.getElementById('twitter_content');
target.innerHTML = ''; //clear the contents
for(var i = 0; i < data.results.length ; i++) {
var tweet = data.results[i];
//process it and add html for hashtags and links
var processed_tweet_text = tweet.text;
//process HTTP urls first...otherwise we would get the added links for the hashtags
var twre = /(http\:\/\/[a-zA-Z0-9.\/]+)/ig
processed_tweet_text = processed_tweet_text.replace( twre, '<a href="$1">$1</a>' );
//process hashtags and add link
twre = /\@([a-zA-Z0-9_\-]+)/ig; //match twitter accounts starting with @ and includes and of these characters: a-z, A-Z, 0-9, "_" and "-" characters.
processed_tweet_text = processed_tweet_text.replace( twre, '<a href="http://twitter.com/$1">@$1</a>' );
target.innerHTML += '<div class="tweet"><a href="http://twitter.com/' + tweet.from_user + '">' + '<img src="' + tweet.profile_image_url + '"><div class="tweet_text"><div class="tweet_user"><a href="http://twitter.com/' + tweet.from_user + '">' + tweet.from_user + '</a></div><div class="tweet_message">' + processed_tweet_text + '</div></div></div>';
//console.log(tweet.from_user);
}
}
}).send();
</script>
UPDATE
OK. So I've found two answers...one with mootools and one with jQuery...thanks to everyone's suggestions.
For mootools, make sure you get the "more" .js file with the Request.JSONP class http://mootools.net/more/ (I was pulling my hair out because I was getting a constructor error...and I finally realized that I didn't have the Request.JSONP class!!!)
Then just change code to this:
var jSonRequest = new Request.JSONP(
{...
For JQuery:
//adding callback=? forces a JSONP call...so no issues with AJAX cross-domain requests
$.getJSON("http://search.twitter.com/search.json?q=+nytimes+OR+TheEconomist&callback=?",
function(data) {...
Try using new Request.JSONP
instead of new Request.JSON
.