9lessons programming blog
Loading Search
9lessons Bring Friends
Wall Script
Follow Me:
Tuesday, April 14, 2009

Twitter Like More Button with jQuery and Ajax.

This is an interesting tutorial I had developed this using jQuery and Ajax. Some days back twitter added new feature like 'more' button it's nice the some thing I'm presenting in this post.

Twitter Like More Button with jQuery and Ajax.

Download Script     Live Demo

Updated Version

First create a database table.
CREATE TABLE messages(
msg_id INT AUTO_INCREMENT PRIMARY KEY,
msg TEXT
);

Step 1


first.js
javascript code..
<script type="text/javascript" >
$(function() {
$(".more").click(function() {
var element = $(this);
var msg = element.attr("id");
$("#morebutton").html('<img src="ajax-loader.gif" />');

$.ajax({
type: "POST",
url: "more_ajax.php",
data: "lastmsg="+ msg,
cache: false,
success: function(html){

$("#more_updates").append(html);
$(".more").remove();

}
});
return false;
});
});
</script>

more_tut.php
You have to run this file first. The first.js jquery code calling more_ajax.php.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js
">
</script>

<script type="text/javascript" src="first.js">
</script>

<?php
include('db.php');
$sql = mysql_query("SELECT * FROM messages order by msg_id desc limit 5;");
while($row=mysql_fetch_array($sql))
{
$msg_id=$row['msg_id'];
$msg=$row['msg'];
?>
<div>
<?php echo $msg; ?>
</div>
<?php } ?>
<div id="more_updates"></div>
<div class="more" id="morebutton" >
<a id="<?php echo $msg_id; ?>" class="more"  href="#" >
More </a>
</div>
</div>

Step 2


second.js
javascript code

<script type="text/javascript" >
$(function() {
$(".more2").click(function() {
var element = $(this);
var msg = element.attr("id");
$("#morebutton").html('<img src="ajax-loader.gif" />');

$.ajax({
type: "POST",
url: "more_ajax.php",
data: "lastmsg="+ msg,
cache: false,
success: function(html){
$("#more_updates").append(html);
$(".more"+msg).remove();
}
});

return false;
});
});
</script>



more_ajax.php
Ya.. here jQuery recalling the same file 'more_ajax.php' so you have to change the div tag class name just adding msg_id value.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js
">
</script>

<script type="text/javascript" src="second.js">
</script>
<?php
include('db.php');
if(isSet($_POST['lastmsg']))
{
$lastmsg = $_POST['lastmsg'];
$sql_check = mysql_query("SELECT * FROM messages where msg_id<'$lastmsg' order by msg_id desc limit 5;");
if(mysql_num_rows($sql_check))
{
while($row=mysql_fetch_array($sql_check))
{
$msg_id=$row['msg_id'];
$msg=$row['msg'];
?>
<div>
<?php echo $msg; ?>
</div>
<?php } ?>
<div id="more_updates"></div>
<div class="more<?php echo $msg_id; ?>" id="morebutton" >
<a id="<?php echo $msg_id; ?>" class="more"  href="#" >
More </a>
</div>
</div>
<?php } } ?>

If you feel free just post a comment don't spam.
Comments
{ 32 comments }
Frank said...

very nice!

Anonymous said...

at least throw a mysql_escape_string in there for the nabz

Anonymous said...

If someone else downloads the downloadable script and asks himself why the update stops working after the second click on the Mooore button here is the fix: In the more_ajax.php file replace
$("#load_updates").append(html);
with
$("#more_updates").append(html);
Now it should work.

Lucifix said...

Look like this demo isn't working anymore :(

Puneet Pandey said...

Hi,

I tried the code, but It seems that after resulting the first output the link for MORE gets disappeared..!! I think $(".more2") is creating issues. any help would be highly appreciated.

Thanks
Puneet

Puneet Pandey said...

Hi Srinivas,

Somehow I am able to make some part of my code working, bt the problem is still there... after displaying the second set of result the link has stopped working.. This is what so far I have done for the Step: 2 http://pastie.org/617317

Seeking for your help

Thanks
Puneet

Srinivas Tamada said...

Hi Puneet,

Sorry for the late reply just give some time.

Anonymous said...

Hi im getting an error message of

Warning: mysql_num_rows(): supplied argument is not a valid MySQL result resource in E:\xampp\htdocs\v2.0\more\more_ajax.php on line 53

Anonymous said...

At the end of my recordset, sometimes MORE vanished and sometimes the picture LOAD continues and there is no mor result in my database

Anonymous said...

ww

twitter search said...

just did in this url :)

Anonymous said...

EXTRA !

hadi said...

v.v nice

Vishal Shah said...

Nice stuff buddy
For all those who din it working try it urself
he gave a good start now u too wrk!!!

hushtalk said...

i am trying this script out @ http://hushtalk.com/more_tut.php but it wont work i get Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; GTB6.4; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2)
Timestamp: Mon, 24 May 2010 17:13:42 UTC


Message: Syntax error
Line: 1
Char: 1
Code: 0
URI: http://hushtalk.com/first.js

all i did was copying the file plus the first line is just simply :
< script type="text/javascript" >

any ideas?

Srinivas Tamada said...

@hushtalk

Try this tutorial Version 2.0

http://www.9lessons.info/2009/12/twitter-style-load-more-results-with.html

Anonymous said...

why when i refresh the page all the comments go away.. is there anyway they can stay in page untill i delete them from the database

Anonymous said...

Hey Guys:

For all of you saying that the more link goes away, here is the solution, replace:

$("#load_updates").append(html);
with
$("#more_updates").append(html);

Johnny said...

Would it be possible to come up with a tutorial to accomplish this task on WordPress. I have spent most of my time today on this and a couple close calls but with no/joy.

Anonymous said...

If you replace it with $("#more_updates").append(html); then the things will become bunched up.

Anonymous said...

OK, if you take off "height:50px" they WILL NOT become bunched up but the page will cut 'em off.

Anonymous said...

NVM. It works fine now. It was just a problem with my CSS! :)

Jasim Ali Khan said...

Hello...

that nice work.
i have implement it on my local server and its working fine.
but when i have uploaded it on my live server it's reload the whole page when i click on more button..

Plz any one can help me out..

Anonymous said...

nice example...pekpekto

Himanshu said...

awesome..!! just what i needed!! stupendous project

Joachim Andersson said...

Great article! Thanks!

Anonymous said...

it doesn't load my other JS scripts anymore...

Anonymous said...

nice example...:)

Ante said...

how can this be done by loading a rss feed instead?

Anonymous said...

I have a big problem with this code, it won't add th div more_updates the second time I click the more button....I don't understand why...any suggestion?

Anonymous said...

nice one

Bijay Yadav said...

Thanks for sharing. A great tutorial. Exactly what I was searching for. Thanks again.

Post a Comment