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.

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.

5 JSON resources for web developers

Vijay Joshi — Wed, 02 Sep 2009 13:06:05 +0000

JSON(Javascript Object Notation) is defined as a lightweight data interchange format and fat-free lightweight alternative to xml. Since json is the native data form of Javascript, it can be used on the browser more easily then XML.

If you are a web developer who works with javascript/ajax a lot and still wondering what this json thing is, here is the first step to start with. Read this post about json and its uses.

Below is a list of 5 resources from where you can learn about json in detail.

1- json.org

First place to go to find definitive information. Douglas crockford is the man who invented json. json.org is a one stop place for everything json.

2- Mastering JSON

Detailed examples as well as retrieving and sending json data between browser and server. You cam also find tips on security and best practices.

3- JSON vs XML debate

Arguments are going on between which is better to use as a data format. Go read and judge yourself.

4- JSON with Ajax and PHP[video]

5- Slide on JSON

Creating a countdown timer in javascript

Vijay Joshi — Mon, 23 Mar 2009 12:14:48 +0000

On one of the projects I am working upon currently, we needed a countdown timer in JavaScript. User had to fill in a form and we wanted to restrict that time to 5 minutes and simultaneously show him how many minutes/seconds are left now. After the set time limit is crossed user is informed that a timeout has occurred.

Here is the code for timer(call it timer.js):

var timer = {
	minutes :0,
	seconds : 0,
	elm :null,
	samay : null,
	sep : ':',
	init : function(m,s,elm)
	{
		m = parseInt(m,10);
		s = parseInt(s,10);
		if(m < 0 || s <0 || isNaN(m) || isNaN(s)) { alert('Invalid Values'); return; }
		this.minutes = m;
		this.seconds = s;
		this.elm = document.getElementById(elm);
		timer.start();
	},
	start : function()
	{
		this.samay = setInterval((this.doCountDown),1000);
	},
	doCountDown : function()
	{
		if(timer.seconds == 0)
		{
			if(timer.minutes == 0)
			{
				clearInterval(timer.samay);
				timerComplete();
				return;
			}
			else
			{
				timer.seconds=60;
				timer.minutes--;
			}
		}
		timer.seconds--;
		timer.updateTimer(timer.minutes,timer.seconds);
	},
	updateTimer :  function(min,secs)
	{
		min = (min < 10 ? '0'+min : min);
		secs = (secs < 10 ? '0'+secs : secs);
		(this.elm).innerHTML = min+(this.sep)+secs;
	}
}
function timerComplete()
{
	alert('time out buddy!!!');
}

To start the timer put these lines after you have included the timer.js

window.onload = init;
function init()
{
    timer.init(0,55,'container');
}

On the markup side create an element with id=container

init function accepts 3 parameters : minutes, seconds and the id of html element where the countdown will be displayed.
You will also need a function which will run after the timer’s execution has completed. For this purpose there is the function timerComplete included in the timer.js file. Write any code here that you would like to execute after timer has terminated (like redirect the user).
Also make sure that you have an html element with id set to container on your html page.
Above timer will do a countdown for 55 seconds. After 55 seconds, function timerComplete will be executed.
You can see a demo here and if you wish you can also view page source code for javascript code.

Download timer.js from this link

Give this article a Thumbs-up on Stumbleupon if you liked it.

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.

Automatic session timeout/logout using php and AJAX

Vijay Joshi — Mon, 08 Dec 2008 14:14:23 +0000

Part 2 is also available now. Read part 2

This article is Part 1 of 2 part series in which you will learn how to logout user after a specific amount of inactivity. In part 1, we will use only php. If the user remains inactive for a certain period of time and then requests a page from server, she will be logged out. In part 2, 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.

In this article we will write a little example in php that will logout a user if she is inactive [does not request any page from server] for a certain amount of time and redirect to a default page.

In the example click Login in index.html to login. This will take you to first.php. Now navigate to second.php using the link.Sit back for 7-8 seconds and then either refresh the page or click the link for first page. If you take any action after 5 seconds you will be logged out, otherwise the requested page will be served.

Explanation follows.

index.html is the default page where the user lands. User is not logged in at the moment. Clicking the Login button takes the user to first.php where user authentication is done. In a real world situation, this link will be replaced with the standard username/password fields.The code for first.php looks like this:

session_start();
if(!isset($_SESSION['isLoggedIn']) || !($_SESSION['isLoggedIn']))
{
	//code for authentication comes here
	//ASSUME USER IS VALID
	$_SESSION['isLoggedIn'] = true;
	/////////////////////////////////////////
	$_SESSION['timeOut'] = 5;
	$logged = time();
	$_SESSION['loggedAt']= $logged;
	showLoggedIn();
}
else
{
	$hasSessionExpired = checkIfTimedOut();
	if($hasSessionExpired)
	{
		session_unset();
		header("Location:index.html");
		exit;
	}
	else
	{
		$_SESSION['loggedAt']= time();// update last accessed time
		showLoggedIn();
	}

}

In starting lines of first.php we check whether a session variable isLoggedIn is set to true or not. If it is not set, user authentication will be done. For this example we will just set the value of isLoggedIn to true, which means user is authenticated now. Of course, in a real application you will write proper code to check the user authenticity.

Now, when the user is logged in we specify the timeOut period crossing which the user will be logged out.

In the next line we get current time and store it in another session variable loggedAt.This is the time user has requested the page from server.

We have in total 3 session variables now.

isLoggedIn – tells whether user is logged in or not.

timeOut – Inactivity period in seconds after which user will be logged out and

loggedAt – last time when the user accessed a page.

After this showLoggedIn function is called which displays some html and a link to another page.

Code for showLoggedIn:

function showLoggedIn()
{
	echo'';
	echo'';
	echo'';
	echo'';
		echo'';
			echo'Page 1. User is logged in currently.Timeout has been set to 5 seconds. If you stay inactive for more then 5 seconds, and then click the link below or refresh the page you will be logged out and redirected to home page.';
		echo'';
		echo'
';
		echo'Go to second page';
		echo'


Back to article';
	echo'';
	echo'';
}

Now what happens when the user refreshes the page after more then 5 seconds.

In line 3 session variable isLoggedIn is checked. Since it has been set to true already, control will go to the else part of if-else block i.e. line 16. In else a function checkIfTimedOut is called which determines whether the user has refreshed the page after more then timeOut period or not. if the value of variable $hasSessionExpired is true, we destroy all session variables and redirect user to index.html using header function.

Value false for $hasSessionExpired means the page has been refreshed in less then timeOut period. So we update the session variable loggedAt with current time and display the page again.
Here is the code for function checkIfTimedOut:

function checkIfTimedOut()
{
	$current = time();// take the current time
	$diff = $current - $_SESSION['loggedAt'];
	if($diff > $_SESSION['timeOut'])
	{
		return true;
	}
	else
	{
		return false;
		$_SESSION['loggedAt']= time();// update last accessed time
	}
}

In line we get the current time. Then we calculate the difference between current time and the time user logged in.

If the difference between these two is more then timeout period specified, we return true.
Similar is the case when user clicks the link on page1. User will be taken to page2.php. First of all we check if the user is logged on using isLoggedIn. If not logged on, simply redirect user to index.html.

If already logged on then a call to checkIfTimedOut function checks whether timout has occurred. If it is a timeout then redirect user to home page else display page 2.
Set the timeout to different values and then check.
First part of article finishes here. Second part will follow soon is now available at this link.