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.
Download Script 
Live DemoJavascript 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>
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.
Related Post:
Twitter Like Flash Message with jQuery.
Twitter like Update box tiny URL Convertion
Delete a Record with animation fade-out effect using jQuery and Ajax.
Nice
Very good! :B
This is what I have been looking for! I'm gonna test it on my site now.
Thanks
What do u put in "Some sql query"??
can u give an example of a full code?
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?
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.
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.
hmm id cannot be numeric it must start with a non-numeric character...
Mind blowing really
This is great. Do you have an example available with the PHP part as well?
Your site is great! I think I'm going to be spending a long time here...
Very nice and simple!
thanks for sharing this nice info.
hoping more from u.
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...
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?
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!
where is the div of #loading content i havent seen in the html codes :) But i know the items where is it belongs to :)