Get Twitter Update With JQuery

From the previous article i write, Get Last Tweet Without OAuth Using PHP, and now i want to share with you how to get the twitter update with JQuery.

Get Twitter update with JQuery is not much different, we are using the same API given by Twitter , process it and display the results. You can get the Twitter update from someone using their username using this Twitter API:

http://api.twitter.com/1/statuses/user_timeline/username.format?callback=?

Where username would be the twitter username, and format could be json, xml, atom and rss.

Okay as usual, if we want to use JQuery we need to include the JQuery library into our html file. As Google host it, we can get for free from:

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

And then i create a form to get the username:

<form id="twitterForm">
<input type="text" value="ivankrisdotcom" size="30" id="username" name="username" />
<div id="button_block">
<input type="submit" id="submitButton" value="Get Tweets"/>
</div>
</form>
<div id="tweets"></div>

And now the JQuery part:

<script type="text/javascript">
$(document).ready(function(){
	$("#submitButton").click( function() {
		var username=$("#username").val();
		var format="json";
		var url='http://api.twitter.com/1/statuses/user_timeline/'+username+'.'+format+'?callback=?';
		if(username != ""){
			$.getJSON(url,function(tweets){ // get the tweets
				$.each(tweets, function(i, tweet){
					$("#tweets").append(tweet.text + "<br/>");
				});
			});
		}
		else{
			alert("Username cannot be empty");
		}
		return false;
	});
});
</script>

Code explanation: When submitButton is clicked, then it will get the username from username textbox, set the format and set the url to twitter API. Then it will check if the username is blank then it will show the warning message. If the username is filled and it will get the data from Twitter API with JSON call. Then the JSON result will loop and each of JSON data will display into the browser.

Get Twitter update with JQuery demo page.