Posted By

Nettuts on 10/02/10

Tagged

Versions (?)

Last Edited at 10/02/10 02:32pm

Statistics

Viewed 779 times

Favorited by 3 user(s)

Related snippets

Display Justin Bieber Tweets with Asynchronous Recursion

/ Published in: JavaScript

Just a fun and silly way to asynchronously update tweets about Justin Bieber.

Highlighted TextExpand

<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>The Biebster</title>
</head>
<body>

<h2> Latest Biebster Tweets </h2>
	<ul id="tweets"> </ul>

(function() {
		var UpdatePanel = {
			init : function(options) {
				this.options = $.extend({
					interval : 5000,
					number : 3,
					hijackTweet : false
				}, options);

this.updater();
			},

updater : function() {
				(function updateBox() {
					this.timer = setTimeout(function() {
						updateIt();
						updateBox();
					}, UpdatePanel.options.interval);
				})();

// get the ball rolling
				updateIt();

function updateIt() {
					$.ajax({
						type : 'GET',
						url : UpdatePanel.options.url,
						dataType : 'jsonp',

error : function() {},

success : function(results) {
							var theTweets = '',
								 elem = UpdatePanel.options.elem.empty();

$.each(results.results, function(index, tweet) {
								if ( UpdatePanel.options.hijackTweet ) {
									tweet.text = tweet.text.replace(/(Justin )?Bieber/ig, 'Nettuts');
								}

if ( index === UpdatePanel.options.number ) {
									return false;
								}
								else {
									theTweets += '<li>' + tweet.text + '</li>';
								}
							});
							elem.append(theTweets);
						}
					});
				}
			},

clearUpdater : function() {
				clearTimeout(this.timer);
			}
		};
		window.UpdatePanel = UpdatePanel;
	})();

UpdatePanel.init({
		interval : 5000,
		number : 5,
		url : "http://search.twitter.com/search.json?q=bieber",
		elem : $('#tweets'),
		hijackTweet : true
	});

</script>
</body>

</html>

URL: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-display-justin-bieber-tweets-with-asynchronous-recursion/

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.