Toggle attribute and css data

Question

I am trying to make a follow button - and when clicked it sends an ajax request to my backend script and if it executes it returns a value that triggers the button's text to go from "follow" to "following" - and that part works just fine. But the jquery part where I send the user data in a data-attribute "data-follow" won't toggle with "data-unfollow". It only works when you refresh the browser which means you can only click the follow button, see it and the data attribute to change to "unfollow" but if you click once more it does not work. I cant figure it out and i've done my searching at the stack.

ERROR

TypeError: $(...).attr(...) is undefined

HTML

<button id="follow" data-follow="1, username1, username2">
        <div><img src="images/loggedin/follow.png"></div>
        <div>Follow</div>
</button>

JQuery

$("button[data-follow]").click(function(){

    var button = $(this);
    var data = $(this).attr("data-follow").split(",");
    alert(data);
    button.find(" > div:last-child").animate({opacity: "0"},200, function(){
       $(this).animate({opacity: "1"},200);
       $(this).html("Following");
       var dataValue = $(this).closest("#follow").attr("data-follow");
       $(this).closest("#follow").attr("data-unfollow", dataValue);
       $(this).closest("#follow").removeAttr("data-follow");
   });

});


$("button[data-unfollow]").click(function(){

    var button = $(this);
    var data = $(this).attr("data-unfollow").split(",");
    alert(data)
    button.find(" > div:last-child").animate({opacity: "0"},200, function(){
       $(this).animate({opacity: "1"},200);
       $(this).html("Follow");
       var dataValue = $(this).closest("#follow").attr("data-unfollow");
       $(this).closest("#follow").attr("data-follow", dataValue);
       $(this).closest("#follow").removeAttr("data-unfollow");
   });

});

you can't put divs inside buttons so your browser is probably correcting it which may be why your js doesn't work, also as there is nothing matching the unfollow selector when it is bound, you need to use a delegated event handler — Pete, Nov 28 '18 at 12:20

score 0 · Answer 1 · answered Nov 28 '18 at 12:27

0

$(document).on('click', 'button[data-follow]', function() {...});
$(document).on('click', 'button[data-unfollow]', function() {...});

Try it this way.

answered Nov 28 '18 at 12:27

Izumenko Alexandr

11
1
2

score 0 · Answer 2 · answered Nov 28 '18 at 12:29

More Generic answer! You can simply change the state of a button by removing, adding and toggling css classes via jQuery.

At (document.ready) check if follwing or unfollowed state via your ajax request and change the button's css class.

if(following){
  $("#buttonID").toggleClass('following_btn');
} else{
  $("#buttonID").toggleClass('unfollowing_btn');
}

Once clicked, process your code in the web service. Follow if unfollowed or Unfollow if followed. Then if you're rturning the updated state use that to re-update your button's css class accordingly. Or perform ajax call to verify the new state after the button click's ajax call finishes.

CSS:

.following_btn{
  //your following style
 }
.unfollowing_btn{
  //your un-following style
 }

Hope it helps!

Toggle attribute and css data

2 Answers2