Ajax Add a Record with Button Status Change using jQuery.
Wall Script
Follow Me:
Saturday, March 21, 2009

Ajax Add a Record with Button Status Change using jQuery.

I like Facebook and Twitter API method of clicking follow, add a friend button. You click the button, the button status changed to 'You following' and 'Remove' at the same time request inserted into database. I had designed this tutorial using Ajax and jQuery.


Download Script     Live Demo

Updated Post:
Exactly Twitter like Follow and Remove buttons with jQuery and Ajax

Javascript Code
<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 noteid = element.attr("id");
var info = 'id=' + noteid;

$.ajax({
type: "POST",
url: "follow.php",
data: info,
success: function(){}
});

$(this).html('<span class="youfollowing_b"> You Following </span><a href=""><span class="block_b"> block </span></a>');

return false;

});
});

</script>

We can using CSS code like this.
$(this).css('background','images/youfollowing.png');

PHP Code
follow.php inserting value $id.
<?php

if (isset($_POST['id']))
{
$id=$_POST['id'];
$sql='insert into friends(user_id) values('.(int)$id.')';
mysql_query($sql);
}

?>


CSS Code

.follow_b

{
background-color:#285694;
font-size:11px;
padding-left:9px;
padding-right:9px;
color:#FFFFFF;
}

.youfollowing_b

{
background-color:#598724;
font-size:11px;
padding-left:9px;
padding-right:9px;
color:#FFFFFF;
}

.block_b

{
background-color:#fdd6d9; font-size:10px;
padding-left:9px;
padding-right:9px;
color:#000000;
border:solid 1px #000000;
margin-left:190px;
}

Download Script     Live Demo

Updated Post:
Exactly Twitter like Follow and Remove buttons with jQuery and Ajax

Related Post :
Delete a Record with animation fade-out effect using jQuery and Ajax.
Twitter Like Flash Message with jQuery.
Perfect Javascript Form Validation using Regular Expressions.
Analyzing URLs as Links to the resource using a PHP function.
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


13 comments:

  1. I like it. I would probably add a fade in or something to that effect, but good job.

    ReplyDelete
  2. can u please keep your demos in 110mb.com as before, i am getting a page load error

    ReplyDelete
  3. Demo link

    http://9lessons.110mb.com/jqueryhtml.html

    ReplyDelete
  4. you'd be better of moving the html replacement code into the onSuccess handler of the AJAX query - also you should have some kind of error handling.

    ReplyDelete
  5. $(this).css('backgournd','images/youfollowing.png')

    replace with
    $(this).css('background','images/youfollowing.png')


    Nice work ;)

    ReplyDelete
  6. проыверка есть ли тут гамнюки

    ReplyDelete
  7. hey great tutorial. is there anyway to add cookie check to this? i mean, i don't want people to click for every single page load.

    ReplyDelete
  8. Thanks for this, you really helped me out with this script!

    ReplyDelete
  9. Hey. Great tutorial. But can you please tell when I will refresh my page, how to display that i have already followed the user ?

    ReplyDelete

Make in India