Question

I want to make a Follow a button like Twitter Follow in JQuery, Json And Ajax

I am using this way for Follow :

 $(function() 
{
$("#follow").click(function(){
var content_id = $('#content_id').val();
var content_type = $('#content_type').val();

$.ajax({
type: "POST",
dataType: 'json',
url: "/memberactions/follow/",
async:false,
data:{content_id:content_id, content_type:content_type},
success: function(){
//$("#loading").ajaxComplete(function(){}).slideUp();
$('#follow').fadeOut(200).hide();
$('#unfollow').fadeIn(200).show();
}
});
return false;
});
});

And this Way to unfollow

$(function() 
{
$("#unfollow").click(function(){
var I = $('#content_id').val();
var content_type = $('#content_type').val();

$.ajax({
type: "POST",
dataType: 'json',
url: "/memberactions/follow/",
async:false,
data:{content_id:content_id, content_type:content_type},
success: function(){
//$("#loading").ajaxComplete(function(){}).slideUp();
$('#unfollow').fadeOut(200).hide();
$('#follow').fadeIn(200).show();
}
});
return false;
});
});

Is this the best way to hide the follow button ?
is there better way to do it ?

Or to put an attribute following in the
like

<a id="follow-an" href="#" following = "yes" >

i dont want have the follow button hidden in the page, to avoid having the both button follow and unfollow in the same page, when he is following , only the unfollow is shown , and when he is not follow , the follow button is shown

Answer 1

I hope this is what you want:

HTML:

<button id="button" data-following="false">Follow</button>

JS:

$("#button").click(function(){
    if($(this).attr('data-following') == 'false'){
        $(this).attr('data-following', 'true');
        $(this).text('Unfollow');
    }else if($(this).attr('data-following') == 'true'){
        $(this).attr('data-following', 'false');
        $(this).text('Follow');
    }
});