Twitter Like More Button with jQuery and Ajax.
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.
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


32 comments:

  1. at least throw a mysql_escape_string in there for the nabz

    ReplyDelete
  2. 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.

    ReplyDelete
  3. Look like this demo isn't working anymore :(

    ReplyDelete
  4. 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

    ReplyDelete
  5. 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

    ReplyDelete
  6. Hi Puneet,

    Sorry for the late reply just give some time.

    ReplyDelete
  7. 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

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

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

    ReplyDelete
  10. 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?

    ReplyDelete
  11. @hushtalk

    Try this tutorial Version 2.0

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

    ReplyDelete
  12. 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

    ReplyDelete
  13. 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);

    ReplyDelete
  14. 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.

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

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

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

    ReplyDelete
  18. 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..

    ReplyDelete
  19. nice example...pekpekto

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

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

    ReplyDelete
  22. nice example...:)

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

    ReplyDelete
  24. 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?

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

    ReplyDelete

Make in India