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