Exactly Twitter like Follow and Remove buttons with jQuery and Ajax
Wall Script
Follow Me:
Thursday, April 02, 2009

Exactly Twitter like Follow and Remove buttons with jQuery and Ajax

I'm still working with jQuery. Last week I had posted 'Ajax Add a Record with Button Status Change using jQuery' but this post updated exactly Twitter like follow and remove buttons with fadeOut and fadeIn effect.

Exactly Twitter like Follow and Remove buttons with jQuery and Ajax


Download Script     Live Demo

Javascript Code
Here two button (.follow) and (.remove)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js
">
</script>

<script type="text/javascript" >
$(function()
{
$(".follow").click(function(){
var element = $(this);
var I = element.attr("id");
var info = 'id=' + I;
$("#loading").html('<img src="loader.gif" >');

$.ajax({
type: "POST",
url: "follow.php",
data: info,
success: function(){
$("#loading").ajaxComplete(function(){}).slideUp();
$('#follow'+I).fadeOut(200).hide();
$('#remove'+I).fadeIn(200).show();
}
});
return false;
});
});
</script>

<script type="text/javascript" >
$(function()
{
$(".remove").click(function(){
var element = $(this);
var I = element.attr("id");
var info = 'id=' + I;
$("#loading").html('<img src="loader.gif" >');

$.ajax({
type: "POST",
url: "remove.php",
data: info,
success: function(){
$("#loading").ajaxComplete(function(){}).slideUp();
$('#remove'+I).fadeOut(200).hide();
$('#follow'+I).fadeIn(200).show();
}
});
return false;
});
});
</script>



Html code
remove button display none.
<?php
$sql=mysql_query("Some SQL Statement");
while($row=mysql_fetch_array($sql))
{
$id=$row["user_id"];
?>
<div id="follow<?php echo $id;?>">
<a href="#" class="follow" id="<?php echo $id;?>">
<span class="follow_b"> Follow </span></a>
</div>
<div id="remove<?php echo $id;?>" style="display:none">
You Following <a href="#" class="remove" id="<?php echo $id;?>">
<span class="remove_b"> remove </span></a>
</div>
<?php
}
?>

If you feel free just post a comment.
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


30 comments:

  1. This is what I have been looking for! I'm gonna test it on my site now.

    Thanks

    ReplyDelete
  2. What do u put in "Some sql query"??
    can u give an example of a full code?

    ReplyDelete
  3. Thanks for sharing. Just wondering how to maintain the previous status after page refresh. In the demo, "Your Following" changes back to "Follow" on page refresh. Any hints as to how the status could be maintain?

    ReplyDelete
  4. By utilizing the follow/remove.php files - which of course you need to make yourself.... Try looking at the code instead of just copying and pasting.

    ReplyDelete
  5. Tyler, which comment are you responding to? If it's my post above concerning maintianing status, could you put down a few lines of code on how to achieve it.

    ReplyDelete
  6. hmm id cannot be numeric it must start with a non-numeric character...

    ReplyDelete
  7. This is great. Do you have an example available with the PHP part as well?

    ReplyDelete
  8. Your site is great! I think I'm going to be spending a long time here...

    ReplyDelete
  9. thanks for sharing this nice info.
    hoping more from u.

    ReplyDelete
  10. to all people asking for php code bits: if you actually read and analyze the code, then mayb it will make more sense and you can write your own php... i wrote mine and it works beatifully...

    also...not asking for code, but if any1 can explain the concept behind maintaining status, id be very grateful...

    ReplyDelete
  11. How do you style the buttons with CSS? Script works but I'm not sure I'm OK with the fact that it seems not to be customisable. Can anyone help with this, or does anyone have any ideas?

    ReplyDelete
  12. This is really sweet...super clean looking add/remove functionality. Giving this a try right now on a current project...have to modify a bit to make it Ajax friendly but will be worth it! :)

    Thanks for the code!

    ReplyDelete
  13. where is the div of #loading content i havent seen in the html codes :) But i know the items where is it belongs to :)

    ReplyDelete
  14. can't wait to try this on my website

    ReplyDelete
  15. If anyone is looking how to maintain the status, you will need to do the following:

    1. In the HTML code, you will need to perform a count of the number of rows in your table where you are tracking who is following whom. This count comes after you peform the SQL query, naturally.

    2. You should then perform an IF ELSE statement. The conditional result should be something like "if mysql_num_rows > 0" (meaning the database has a record of your logged in user already following the profile they are currently viewing, then display ONLY the div that corresponds to the "remove" button and remove.php. The "else" statement (meaning there is no record of this user following this profile) should include both div tags as cited above.

    My example can't be posted since the comments dont allow HTML tags to be used...However, I am willing to share the code if anyone wants to respond to my comment with their email address or email me directly, please feel free.

    My code maintains the status for me every time, and should solve anyone's "maintain status" issues above.

    Thanks for the code, it's super awesome.

    ReplyDelete
  16. Nice code. I'm trying to use it on my script. Thanks.

    ReplyDelete
  17. how about the user who logged in is equals to users, instead of showing follow/unfollow it should shows "YOU"

    ReplyDelete
  18. how to check if log-in id is the same with the user id? please eloaborate to me. thanks in advance

    ReplyDelete
  19. So i need idea about add/remove for database

    ReplyDelete
  20. i THANK YOU...ALL OF THE TUTORIAL OUT THERE...YOUR IS SIMPLE, STRAIGHT TO POINT AND EASY.. THANK

    ReplyDelete
  21. In the following code, what is "user_id"
    $id=$row["user_id"];

    ReplyDelete

Make in India