Twitter like loading (Load More)

twitter-t

basically this is the most simplest way to load data in twitter way (Load more). for this i have not used jquery, mootools or any other fancy javascript framework. to use this you need very basic knowledge of javascript along with little ajax & php that’s it, so here we start

step 1: you html base

again i have kept this very simple.. just one div where you want to show your twitts. now heart of this code will be your javascript functions here we will use 2 javascript functions one to send request (AJAX) and another one to load your resulting twitts… also i have used 1 javascript variables to trace my twitts (pages)


i.e.

var page = 1;

lets start with first function

function getData(){

	document.getElementById("div-Loading").className = "show";
	document.getElementById("div-button").className = "hide";
	remoteCall("php/ajax.php","page="+page,"loadData");
}

below two lines are just hide the load more button and show loading image.

	document.getElementById("div-Loading").className = "show";
	document.getElementById("div-button").className = "hide";

and this are simple Stylesheet classes to show and hide the content.

.show{
	display:block;
}

.hide{
	display:none;
}

now this is simple ajax call function from ajax.js used to send ths ajax request.. where its first argument denots path of PHP script, second argument is your post variables (yes here we have used post method ajax), and last argument is just a name of function where you ll recive ajax response

	remoteCall("php/ajax.php","page="+page,"loadData");

NOW PHP script

userTimeLine($_REQUEST['page']);
	$total = count($status);
	echo "@@@@#####@@@@";
	for ($i=0; $i < $total ; $i++ )
	{
		echo "". $status[$i]['text'] ."";
		echo "@@###@@";
	}
	echo "@@@@#####@@@@";
?>

here we have used a real time twitts of account technoreaders. and to get the twitts we have used twitter api (click here to know more about this api ). now here we have just passed the username and password of twitter account and we got the twitts. now using below for loop we echo the twitts. and we have also used some wiered strings with @ # chars that is just to make sure we get proper data in response and to separate the twitts. now again coming back to javascript part. to recive and load the twitts.

function loadData()
{
	if(sResponse != "")
	{

		if(sResponse == "@@@@#####@@@@@@@@#####@@@@"){
		document.getElementById("div-Loading").className = "hide";
		document.getElementById("div-button").className = "hide";

		}else{
		page++;
		var arr1 = new Array();
		arr1 = sResponse.split("@@@@#####@@@@");
		arr1 = arr1[1].split("@@###@@");
		for(i =0;i

here we get xmlHttpResonse in variable sResponse..

	if(sResponse == "@@@@#####@@@@@@@@#####@@@@"){
	document.getElementById("div-Loading").className = "hide";
	document.getElementById("div-button").className = "hide";
	}

this code is just for if we dont receive anything in response then we will hide both load more button and loading image. else we will split the response with string of pattern “@@@@#####@@@@”, now you might think why we used this chars to wrap the response. sometimes we echo some variables or querys in our php script and if we get nything else the our data … in that case javascript fails to load proper data.. so its always better to wrap your data with some unused strings. now again we split filtered data with pattern “@@###@@”, and now in resulting array we have twitts.. now we just have to wrap this twitts with proper html effects and load it in HTML Page. so now we ll create divs for each twitt and append it with the div which we have mentioned in HTML..

that’s it now ur twitter like load is done..

modifications:

  • first of all we have made one tiny miny change in Twitter API so if you want then use code from our sample only..
  • also disabling (hiding) of load more button at the end of all twitts is not working fine.. we were more concentrated on loading data not on other functionality
  • here you can use many effects to make it look better for example have a look at this sample,

but for basic this is working fine, please let us know if you find any modification in this Thanks.

DOWNLOAD SAMPLE

if you find any missing point in here, please let us know in comment section or tweet us at @linuxreaders. To get more articles like this, subscribe to our RSS feeds / Mails.

One Comments

  • Tweets that mention Twitter like loading (Load More) | TechnoReaders.com -- Topsy.com says:

    [...] This post was mentioned on Twitter by LinuxReaders, j. j said: Twitter like loading (Load More) – http://www.technoreaders.com/2009/12/03/twitter-like-loading-load-more/ [...]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Trending Posts