vijayjoshi.org » Ajax

Using Twitter API and jQuery to display recent tweets

Vijay Joshi — Fri, 24 Dec 2010 06:52:13 +0000

In this article I will show you how you can display your (or any other user’s) recent tweets with some jQuery magic. We will create a widget (sort of) that will fetch n number of latest tweets from public timeline of a user using Twitter API and then we will display them in a nice list.

End result will look like the following.

Have a look at a live example.

Let us start creating it now. First write some HTML. Define some css styles in the head section which will control the display of list. In the body section, there is a select box with id layout which will be used to select either a wide or a narrow layout for displaying the tweets. Then create a div with id tweets. We will create a ul inside this div which will have tweets as list items.



	
		Latest Tweets Widget - Vijay Joshi | http://vijayjoshi.org
		
	
	
		
			Select layout

jQuery Code

Just before the body tag closes, add path to jQuery library either from your local file system or the Google CDN.

With this we are ready to pull the tweets. Start by defining 2 variables userName and count. Inside document.ready add a change event handler to select box with id layout. It will change its width from 600px to 300px on selecting narrow and again back to 600px on selecting wide.

Now call a function getTweets and pass user name and number of tweets to it.

var userName = 'v08i';
var count = 8;
$(document).ready(function()
{
	$('#layout').change(function()
	{
		$('#container').css({ 'width' : $(this).val()+ 'px'});
	});
	getTweets(userName, count);

});

getTweets function will actually contact the Twitter API and will fetch tweets from there. We will request the response in JSON format from Twitter using jQuery’s getJSON method.

Before we proceed let us talk a bit technical. As you probably know, browsers do not allow cross-domain ajax requests due to security reasons. In this case the example we are creating is at domain vijayjoshi.org while the twitter domain is api.twitter.com. If both domains were same, a simple AJAX request would have sufficed. To overcome this problem JSONP aka “JSON with Padding” is used.

To use JSONP with jQuery, just change the dataType parameter from json to jsonp. Now you do not have to worry about cross domain restriction or anything else. Just define a callback function (showTweets in this example) and you will receive the JSON response there.

function getTweets(userName, count)
{
	$.getJSON(
		'http://api.twitter.com/1/statuses/user_timeline.json?screen_name=' + userName + '&count='+ count +'&callback=?',
		{},
		showTweets,
		'jsonp'
	);
}

Now that we have the response, define showTweets function, iterate in the results and display them. Here is how.

function showTweets(tweets)
{
	var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
	var str = '';
	str+= 'Recent Tweets from ' + userName +'';
	var i = 0;
	$.each(tweets, function(index,value)
	{
		if(i == count)	return;
		var dt = new Date(value.created_at);
		str+= '';
		str+= value.text;
		str+= '';
		str+='';
		str+= dt.getDate() + '-' + months[dt.getMonth()] + '-' + dt.getFullYear();
		str+= ' at ' + dt.getHours() + ':' +dt.getMinutes();
		str+= ' From ' + value.source;
		str+= '';
		i++;
	});
	str+= '';
	$('#tweets').html(str);
	$('#tweets > ul > li:odd').addClass('odd');
	$('#tweets > ul > li:even').addClass('even');
}

I have used only some of the values from the JSON response. You can view the full response by typing the following into your browser.

http://api.twitter.com/1/statuses/user_timeline.json?screen_name=your_twitter_username&count=10

With this we are done. Have a look at the demo I have created.

For full source code, just view page source. It’s all happening on your browser after all.

If you have any questions, let me know in comments.

Guys, I am writing a book

Vijay Joshi — Mon, 22 Nov 2010 11:25:08 +0000

Yes that’s right and it is called PHP jQuery Cookbook. As the name suggests, it’s about creating rich internet applications using 2 of my favorite technologies – PHP and jQuery.

I love coding web apps and helping others find solutions. Perhaps that is the reason I agreed to write when the wonderful people at Packt Publishing contacted me. (Also, a book on resume isn’t that bad either )

Another reason is I love Open source. It is a lovely philosophy and I am a strong believer in it. Having learnt so much from the Open source community since I started coding, I have always wanted to return something back. Nothing could have been better then this. And did I mention, Packt pays direct royalty to a project if they sell a book written on the same.

Long story short, the book is cookbook with around 65 recipes covering PHP, jQuery, MySql and some API’s (Flickr, Youtube).

Structure wise, it has 10 chapters in all.

Handling Events
Combining PHP and jQuery
Working with XML documents
Working with JSON
Working with Forms
Adding Visual effects to forms
Creating cool Navigation Menus
Data binding with PHP and jQuery
Enhancing your site with PHP and jQuery
Appendix – FireBug

The book is available now will be available by 14th December ~~Christmas this year or January next year~~. You can have a look in detail about what it is all about on Packt Website. Order a copy in case you find it interesting

Collection of 10 top 10 lists about web development

Vijay Joshi — Wed, 23 Sep 2009 13:02:25 +0000

I am a regular reader of web development articles and in this process bookmark a lot of them. Out of that collection I present to you a list of 10 articles which themselves are lists of 10(tips, functions etc). Not all of them are top 10 but equally good. All these articles are related to php, javascript, html, mysql and web development in general.

1- 10 code snippets for PHP developers

Simple and handy functions for common tasks like validating email address and XSL transformation.

2- 10 Advanced PHP Tips Revisited

Detailed and excellent tips from famous PHP gurus Chris Shiflett and Sean Coates.

3- Top 10 PHP frameworks

PHP frameworks are quite popular among developers these days. This site is dedicated to php frameworks alone. In this article all frameworks have been compared for features. Very useful to help you in decision making if you are planning to use a framework for your next project.

4- Top 10 custom JavaScript functions of all time

This is my favorite one. These 10 functions are a must in every web developer’s toolbox. Functions like getElementsByClass, toggle and cookie functions are included.

5- 10 JavaScript Quick Tips and Best Practices

Another good article on javascript best practices.

6- Top 10 Firefox Addons For Web Developers

Who hasn’t heard of Firebug or GreaseMonkey. This article lists similar addons for firefox that are a great help in web development.

7- 10 Ways to Improve Your Web Page Performance

From the article:

This article primarily focuses on front-end performance since it’s the easiest to work on and provides you the most bang for your buck.

8- 10 Dirty Little Web Development Tricks

Simple tips to help you in web development.

9- 10 Rare HTML Tags You Really Should Know

List of 10 html tags that are not used frequently. Check them out. It is possible that you have not heard about some of them.

10- 10 Useful articles about Database design

From the article:

The list includes some tips to define relationships-entities model, common database design mistakes, database normalization, how to use PHP and SQL to create tables and relationships and a correct approach to define relationships between tables.

Automatic session timeout/logout using php and AJAX : Part II

Vijay Joshi — Fri, 12 Dec 2008 05:31:16 +0000

This article is final part of 2 part series in which you will learn how to logout a user after a specific amount of inactivity. In part 1, we used only php. In this part, we will extend this functionality and will use AJAX to automatically logout the user if the inactivity time is exceeded. Logout will be irrespective of whether the user requests any page from server or not.

Understanding part 1 is necessary to complete part 2. You can read it here.

Hope you enjoyed the last post. In last post you saw that we logged out the user if she requests a page from the server after certain inactivity period.

Would it not be better that if the application ended the session as soon as the timeout period expires without having to wait for the user to request the page again. Sure it would be and this is what you will learn in this article.

So get ready now.

We will poll the server with AJAX to check if the timeout period has passed or not. The response of AJAX call will have a boolean value by which we will redirect the user. I will assume that you have working knowledge of AJAX and therefore will not explain the AJAX code in detail.

Here are the steps that we will follow:

1- Set a poller in javascript that will contact a php script in our example.

2- The php script will check the timeout status of user.

3- php script will return either true or false as AJAX response depending upon if the session is timed out or not.

4- Response true means timeout has expired, hence user will be redirected to home page whereas false means user is still logged in.

Let’s do it in code now.

First the javascript part.Create a file named ajax.js in the same directory where other files are placed with this code:

window.onload = init;
var interval;
function init()
{
	interval = setInterval(trackLogin,1000);
}
function trackLogin()
{
	var xmlReq = false;
	try {
	xmlReq = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
	try {
	xmlReq = new ActiveXObject("Microsoft.XMLHTTP");
	} catch (e2) {
	xmlReq = false;
	}
	}
	if (!xmlReq && typeof XMLHttpRequest != 'undefined') {
	xmlReq = new XMLHttpRequest();
	}

	xmlReq.open('get', 'check.php', true);
	xmlReq.setRequestHeader("Connection", "close");
	xmlReq.send(null);
	xmlReq.onreadystatechange = function(){
		if(xmlReq.readyState == 4 && xmlReq.status==200) {
			if(xmlReq.responseText == "true")
			{
				clearInterval(interval);
				alert('You have been logged out.You will now be redirected to home page.');
				document.location.href = "index.html";
			}
		}
	}
}

Line 1 says, execute the init function after the DOM is loaded. Then we declare a variable interval. In init we use setInterval function. setInterval executes the function name passed as first parameter every number of milliseconds specified as second argument. In this case trackLogin will periodically execute after 1000 ms or 1 second. Keeping time limit this much low is not advisable as this will put too much load on servers. It must be somethingh like 5 to 10 minutes depending upon the requirement of the application.

Now we come to trackLogin. This is the function which will make an AJAX call to our php script.

Lines 9 till 21 create an instance of XMLHTTP object.

Line 23 opens a connection to the check.php file on the server using get method.

In line 26 we register the callback function i.e. when ajax call returns from the server.

Line 28 checks whether the response is true. true means user has been logged out on the server and thus will have to login again. Therefore, in line 30 we remove the polling by using clearinterval and redirect the user to homepage after informing that session has been terminated. No action is taken in case response is false.

This makes our javascript/AJAX part over. Moving to php now, there are some changes in php files also.

Open the file first.php and go to the function showLoggedIn. Paste this line between declarations.

echo'';

Do the same for second.php.

checkIfTimedOut function has also been moved to a separate file called ‘timeCheck.php’ since it will be used in 3 places now. So, delete the function definition for checkIfTimedOut from both these files and just before the line

$hasSessionExpired = checkIfTimedOut();

insert a new line

require 'timeCheck.php';

Now create another file called check.php (that we called through our polling function in javascript).

Here we will write a function timeCheck which will determine whether session ended or not. It will return true if timeOut has been exceeded,false otherwise.

function timeCheck()
{
    if(!isset($_SESSION['isLoggedIn']) || !($_SESSION['isLoggedIn']))
    {
		//user is not logged in
	    session_unset();
	    return true;
	    exit;
    }
	else
	{
		// user is logged in
		require 'timeCheck.php';
		$hasSessionExpired = checkIfTimedOut();
		if($hasSessionExpired)
		{
			session_unset();
			return true;
		}
		else
		{
			return false;
		}
	}
}

In line 3 we check if the user is logged in or not. If not then session_unset is called and we return true.

If the user is logged in control goes to line 13.

Here we include the file timeCheck.php which contains the definition for checkIfTimedOut. In the next line we call checkIfTimedOut(). As you know from previous post, this function calculates the difference between current time and last accessed time(which is stored in session variable loggedAt) and returns true if the difference is greater then the session variable timeOut.

If it returned true, we unset all session variables and return true.

Now add these lines to the file where we will call timeCheck function.

session_start();
$stillLoggedIn = timeCheck();
echo $stillLoggedIn;

Pretty simple, AJAX call will arrive at this page every second.And timeCheck() will be called each time.

Value of $stillLoggedIn will be returned as the response to the AJAX call.

That is all we have to do.

Now open the index.html in your browser and click on Login. This will log you in and take you to first.php. Stay inactive here for more than 5 seconds and you will see the alert that you have been logged out. Try the same for second.php.

If you keep on navigating between first.php and second.php in less then 5 seconds, your session will not end. Try changing the timeOut specified in first.php.

If you are on firefox and have firebug installed, you can see in the console that every second an AJAX call is being made to page.

That brings us to the end of this 2 part series. Hope you enjoyed it. If you have any questions or would like me to explain the code further, I will be most happy to do so. Please leave a comment or stumble the page if you liked this article.