milesmeow milesmeow -5 years ago 116
Ajax Question

Writing to .innerHTML doesn't work when served from webserver but works when browsed as a file, what could be causing this?

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=""></script>
<script type="text/javascript">
var jSonRequest = new Request.JSON(
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="$1">@$1</a>' );

target.innerHTML += '<div class="tweet"><a href="' + tweet.from_user + '">' + '<img src="' + tweet.profile_image_url + '"><div class="tweet_text"><div class="tweet_user"><a href="' + tweet.from_user + '">' + tweet.from_user + '</a></div><div class="tweet_message">' + processed_tweet_text + '</div></div></div>';


OK. So I've found two 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
(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 no issues with AJAX cross-domain requests
function(data) {...

Answer Source

Try using new Request.JSONP instead of new Request.JSON.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download