CODEWITHSUNDEEP
jqueryajax
MG91
MG91

Reputation: 193

Button doesn't work after changing id using ajax and jquery

I am trying to make a follow/unfollow button. The follow button works fine. On click I change the button id to "unfollow" but when I click the button again (when it has the id "unffollow") it acts as if it still has the id of "follow" which means it's still using the first ajax method as so:

$("#fbtn").on('click',function(){ 
    var fbtn = $('#fbtn');
    var followee_name = $('#author').text();

        $.ajax({
            url: '/follow',
            method: 'POST',
            //dataType: 'application/json',
            data:{followee_name:followee_name},
            success: function(response){ 
            console.log("Followed")
            fbtn.text('Unfollow');
            fbtn.attr('id','unfollow');
            }
        });
});

Then:

$("#unfollow").on('click',function(){ 
    var unfollowbtn = $('#unfollow');
        $.ajax({
            url: '/unfollow',
            method: 'DELETE',
            //dataType: 'application/json',
            success: function(response,err){ 
            if(err){
                console.log(err);
            }
            console.log("Unfollowd")
            unfollowbtn.text('Follow');
            unfollowbtn.attr('id','fbtn');
            }
        });
});

HTML:

<a id="author" href="#"><%= showPost.username %></a> //this displays a username
<button style="width:100px;" type="button" id="fbtn">Follow</button>

I don't know where I went wrong, in theory this looks fine to me but I am new to jquery and ajax and I must have missed something.

Upvotes: 3

Views: 792

Answers (5)

phuzi
phuzi

Reputation: 13079

As others have stated, the time when the click handlers are added means that the "unfollow" handler would likely never get triggered and would just result in the "follow" handler running after every click.

However I'm not sure this is the best way to do what you want. Why not just have two buttons with one hidden. Toggling the visibility of the buttons which is likely way quicker than modifying the button.

$(document).ready(function() {
  $('#follow').on('click', function() {
    // do something with AJAX
    $('#followButtons').addClass('following');
  });

  $('#unfollow').on('click', function() {
    // do something with AJAX
    $('#followButtons').removeClass('following');
  });
});
#followButtons.following #follow {
  display: none;
}

#unfollow {
  display: none;
}

#followButtons.following #unfollow {
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="followButtons" class="">
  <button id="follow" type="button">Follow</button>
  <button id="unfollow" type="button">Unfollow</button>
</div>

Upvotes: 1

Eddie
Eddie

Reputation: 26854

I know this is not what you are asking. This is just an alternative solution.

You can just have one event and just a switch inside.

You can store the status using .data()

$(document).ready(function(){
	
	$( "#follow-action" ).click(function(){
		var action = $(this).data("action");

		switch( action ) {
			case "follow":
				$(this).data("action", "unfollow");
				$(this).text('Unfollow');
				
				/*
					Put your follow actions here.. ajax etc
				*/

				break;
			case "unfollow":
				$(this).data("action", "follow");
				$(this).text('Follow');
				
				/*
					Put your unfollow actions here.. ajax etc
				*/
				
				break;
		}
	});
	
	//console.log();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button type="button" id="follow-action" data-action="follow">Follow</button>

Upvotes: 1

Shubham Agrawal
Shubham Agrawal

Reputation: 417

Instead of using direct event binding you can do something like this

$('body').on('click', "#unfollow", function(){ 
var unfollowbtn = $('#unfollow');
    $.ajax({
        url: '/unfollow',
        method: 'DELETE',
        //dataType: 'application/json',
        success: function(response,err){ 
        if(err){
            console.log(err);
        }
        console.log("Unfollowd")
        unfollowbtn.text('Follow');
        unfollowbtn.attr('id','fbtn');
        }
    });
});

and 

$('body').on('click', "#fbtn", function(){ 
var fbtn = $('#fbtn');
var followee_name = $('#author').text();

    $.ajax({
        url: '/follow',
        method: 'POST',
        //dataType: 'application/json',
        data:{followee_name:followee_name},
        success: function(response){ 
        console.log("Followed")
        fbtn.text('Unfollow');
        fbtn.attr('id','unfollow');
        }
    });
});

Upvotes: 1

Milan Chheda
Milan Chheda

Reputation: 8249

Instead of changing ID and writing JS for that, you rather just change class and use that class in code:

$("#fbtn").on('click', function() {
  var fbtn = $(this);
  if (fbtn.hasClass('follow')) {
    fbtn.removeClass('follow').addClass('unfollow');
    fbtn.text('Unfollow');
  } else {
    fbtn.removeClass('unfollow').addClass('follow');
    fbtn.text('Follow');
  }
  console.log('New Class: ' + fbtn.attr('class'));
  /*$.ajax({
    url: '/follow-unfollow',
    method: 'DELETE',
    success: function(response, err) {
      if (err) {
        console.log(err);
      }
      console.log("Unfollowd")
    }
  });
  */
});
.follow {
  background: red;
}

.unfollow {
  background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button style="width:100px;" class='follow' type="button" id="fbtn">Follow</button>

Upvotes: 2

sTx
sTx

Reputation: 1261

Event binding for dynamic crated elements concept

$('body').on('click','#fbtn',function(){ 
    var fbtn = $('#fbtn');
    var followee_name = $('#author').text();

        
            console.log("Followed")
            fbtn.text('Unfollow');
            fbtn.attr('id','unfollow');
});

$('body').on('click',"#unfollow",function(){ 
    var unfollowbtn = $('#unfollow');
            console.log("Unfollowd")
            unfollowbtn.text('Follow');
            unfollowbtn.attr('id','fbtn');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<button style="width:100px;" type="button" id="fbtn">Follow</button>

Upvotes: 1

Related Questions