javascript - 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 retrieve tweets twitter. after receive it, write .innerhtml property target div. when test locally file, i.e. file:// in url, see formatted tweets on webpage. when serve local webserver, i.e. http://, formatted tweets not showing in div.
what causing this? (i've tested in safari , chrome on osx...same behavior) i've included code that's head section of page. also, when debug javascript in safari:
"typeerror: result of expression 'data' [undefined] not object" appears 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 contents for(var = 0; < data.results.length ; i++) { var tweet = data.results[i]; //process , add html hashtags , links var processed_tweet_text = tweet.text; //process http urls first...otherwise added links hashtags var twre = /(http\:\/\/[a-za-z0-9.\/]+)/ig processed_tweet_text = processed_tweet_text.replace( twre, '<a href="$1">$1</a>' ); //process hashtags , add link twre = /\@([a-za-z0-9_\-]+)/ig; //match twitter accounts starting @ , includes , of these characters: a-z, a-z, 0-9, "_" , "-" 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. i've found 2 answers...one mootools , 1 jquery...thanks everyone's suggestions.
for mootools, make sure "more" .js file request.jsonp class http://mootools.net/more/ (i pulling hair out because getting constructor error...and realized didn't have request.jsonp class!!!)
then change code this:
var jsonrequest = new request.jsonp( {...
for jquery:
//adding callback=? forces jsonp call...so no issues 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
.
Comments
Post a Comment