Advanced Search

Return to Snippet

Revision: 32819
at October 4, 2010 02:37 by Nettuts
Updated Code 
<!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>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

	<script>

	(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>

Revision: 32818
at October 2, 2010 23:50 by Nettuts
Updated Code 
<!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>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

	<script>

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

				this.options.url += '&callback=?';

				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 : 'json',

						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>

Revision: 32817
at October 2, 2010 14:32 by Nettuts
Initial Code 
<!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>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

	<script>

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

				this.options.url += '&callback=?';

				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 : 'json',

						error : function() {},

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

							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>
Initial URL 
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-display-justin-bieber-tweets-with-asynchronous-recursion/
Initial Description 
Just a fun and silly way to asynchronously update tweets about Justin Bieber.
Initial Title 
Display Justin Bieber Tweets with Asynchronous Recursion
Initial Tags 
ajax, javascript, jquery, twitter
Initial Language 
JavaScript