How to make a button reusable after the first click with AJAX/JQUERY and PHP

Question

I have built a follow/unfollow Twitter like system using PHP. With help of this forum I have been successful creating a dynamic button that allows you to “follow” or “unfollow” each user, using AJAX/JQUERY to run the PHP/MySQL code in the back and avoid refreshing the page when the action happens. The thing is that I am able to run this script on the background only once. Let's say a user unfollows a member by mistake (my AJAX/JQUERY script won't have any problem with that), but then wants to follow him again, this is where I am stuck. The page will have to be refresh to make this happen. I know this is happening due to the PHP dynamic data that I am using as you will see in my code.

In the PHP code am running an iteration that output all the members in the database. I am outputting here (for simplicity) just the member's name and a follow/unfollow button to each one. The php variable $what_class is the result of a PHP function that looks into the database to determine if the user is following or not that member. $what_class will output the strings “follow” of “unfollow” so the class can be defined, and then be targeted by either of the two the Jquery scripts.

PHP CODE

<?php  foreach($members as $member){ ?>
 <p class="member_name"><?php echo $member->name; ?></p>
 <button class="<?php echo $what_class; ?>" type="button" data-member_id="<?php echo $member->id; ?>" user_id="<?php echo $id;?>" ><?php echo $what_class; ?></button>
<?php } ?>

Below is the JQUERY scripts, as mentioned before, the button class will be defined by PHP through $what_class . This is the problem when trying to re-use the button after the first time, class won´t change in PHP's $what_class unless the page is refreshed. I tried to use $(this).removeClass('unfollow').addClass('follow') to change the class using Jquery and have the button to be re-usable but it isn't working.

JQUERY SCRIPTS TO FOLLOW OF UNFOLLOW

<script type="text/javascript">
    $(document).ready(function() {
       $("button.unfollow").on('click', function() {
           var memberId = $(this).attr('data-member_id');
           var userId = $(this).attr('user_id');
            $.get("follow_actions.php", {unfollow_id:memberId, user_id:userId} , function(data) {
           });
            $(this).html('follow');
            $(this).removeClass('unfollow').addClass('follow');

       });
   });
   </script>

        <script type="text/javascript">
    $(document).ready(function() {
       $("button.follow").on('click', function() {
           var memberId = $(this).attr('data-member_id');
           var userId = $(this).attr('user_id');
            $.get("follow_actions.php", {follow_id:memberId, user_id:userId} , function(data) {
           });
           $(this).html('unfollow');
           $(this).removeClass('follow').addClass('unfollow');

       });
   });
   </script>

Does anyone knows how I accomplish having a reusable button without reloading the page? I thank you in advance.

Answer 1

Previous Answer:

What I do for that kind of scenario is to have two buttons. One will be shown to the user, and the other one will be hidden.

<button class="follow" data-member_id="<?php echo $member->id; ?>" user_id="<?php echo $id;?>" >Follow</button>
<button class="unfollow" style="display:none" data-member_id="<?php echo $member->id; ?>" user_id="<?php echo $id;?>" >Unfollow</button>

Just tweak your php code what to show and what not.

When a button is click, hide this button and show the other one.

$(document).ready(function(){

  $(".follow").on("click", function(){
    $(".follow").hide(200);
    $(".unfollow").show(200);
    /* PUT YOUR OTHER PROCESSES HERE */
  });

  $(".unfollow").on("click", function(){
    $(".follow").show(200);
    $(".unfollow").hide(200);
    /* PUT YOUR OTHER PROCESSES HERE */
  });

});

Check this JSfiddle .

Update:

We can use toggleClass() of jQuery.

<button class="follow" data-member_id="12" user_id="12">Follow</button>

And the script:

$(document).ready(function(){
  $(".follow, .unfollow").on("click", function(){

    var memberId = $(this).attr('data-member_id');
    var userId = $(this).attr('user_id');

    $(".follow, .unfollow").toggleClass("follow unfollow");
    $(this).text(function(i, text){
          return text === "Follow" ? "Following" : "Follow";
    });
  }); 
});

Check this JSfiddle .

Answer 2

use <button class="followUnfollow <?php echo $what_class; ?>"

You need to write as less code as possible. Have a common class such as followUnfollow and then check if follow class exists within this element using hasClass function from jQuery.

Have a look at the code below.

<script type="text/javascript">
    $(document).ready(function() {
       $("button.followUnfollow").on('click', function() {
           var memberId = $(this).attr('data-member_id');
           var userId = $(this).attr('user_id');

            if($(this).hasClass('follow')) { // FOLLOW
                $.get("follow_actions.php", {follow_id:memberId, user_id:userId} , function(data) {
                });
                $(this).html('unfollow');
                $(this).removeClass('follow').addClass('unfollow');
            } else { // UNFOLLOW
                $.get("follow_actions.php", {unfollow_id:memberId, user_id:userId} , function(data) {
                });
                $(this).html('follow');
                $(this).removeClass('unfollow').addClass('follow');
            }
       });
   });
   </script>