Cannot implement follow-unfollow button using jquery ajax

Question

Scenario: the database part for the follow and unfollow action is working fine. There must be some issue with the jquery and ajax part only as the button changes from follow to unfollow(with few css styling) only after refreshing the page and not on clicking. Clicking the button more than once is not possible without refreshing. Here is the jquery part

<script>
function addfollow(friend,action)   
{
    $.ajax({
        url:"follow.php",
        data:'friend='+friend+'&action='+action,
        type:"POST",
        success:function(data){
            switch(action){
                case "follow":
                $("#"+friend).html('<input type="submit" id="'+friend+'" class="unfollow" value="unfollow" onClick="addfollow('+friend+',\'unfollow\')"/>');
                break;
                case "unfollow":
                $("#"+friend).html('<input type="submit" id="'+friend+'" class="follow" value="follow" onClick="addfollow('+friend+',\'follow\')"/>');
                break;
            }
        }
    });
}
</script>

Below is the html+php code for calling the above method

<?php
    $action="follow";
    if()//php code to check if user is already a follower 
    {
       $action="unfollow";
    }
    $friend=$name;
?>
<div class="col-sm-12">
    <input type="submit" id="<?php echo $friend;?>" class="<?php echo $action;?>" value="<?php echo $action?>" onClick="addfollow('<?php echo $friend;?>','<?php echo $action;?>')"> 
</div>

Since, I donot have proper understanding of jquery-ajax so I believe there must be something wrong with the syntax in sucess:function(data). H

Answer 1

jQuery.html() . will get / set html INSIDE of the element(s) that match. Which isn't what you want here. Try .replaceWith() to remove the current element and replace it with something else.

EDIT:

You might also have better luck if you took a more javascript centric approach. Writing javascript with php can get confusing.

If you php code just created elements that looked like.

<button> data-friend-id="<?php echo $friend;?>" class="follow-button <?php echo $action;?>" data-following="true"></button>

Then you could handle the rest of the logic in javascript. Something like:

//Set a click handler on the follow buttons.
$('.follow-button').click(handleFollowClick);

function handleFollowClick() {
  var $button, friend_id, action;    

  // jQuery will set 'this' to the button that was clicked. 
  $button = $(this);

  // Extract data from the button.
  friend = $button.data('friend-id');
  action = $button.data('following') === 'true' ? 'unfollow' : 'follow';

  $.ajax({
    url:"follow.php",
    data:'friend='+friend+'&action='+action,
    type:"POST",
    success:function(data){ toggleFollow($button)}
  });
}

//You could actually get away with styling the button default as
//not-following. Then just $button.toggleClass('follow'); but
//this is consistent with your existing approach.
toggleFollow($button) {
  if ($button.data('following') === 'true) {
    $button.data('following', 'false');
    $button.removeClass('unfollow');
    $button.addClass('follow');
  } else {
    $button.data('following', 'true');
    $button.removeClass('follow');
    $button.addClass('unfollow');
  }
}