Change button functionality jQuery

Question

I've got this code in twig

 {% if followsId == null %}
            <div id="followUser" class="follow" data-userId="{{ profileUserData.id }}" data-currentUserId="{{ loggedUserData.id }}" data-action="follow">
                Follow
            </div>
 {% else %}
            <div id="unFollowUser" class="follow" data-followsId="{{ followsId }}">
                Unfollow
            </div>
 {% endif %}

I just wanted to change content and functionality to button on click and tried this code with jQuery

$('#followUser').click(function () {
    var userId       = $(this).attr('data-userId'),
        action       = $(this).attr('data-action'),
        currentUser  = $(this).attr('data-currentUserId');

    $.ajax({
        method: 'POST',
        url: "/sci-profile/profile/follow",
        data: {
            userId: currentUser,
            profileUserId: userId,
            action: action
        },
        success: function(response)
        {
            $('#followUser').attr('id', 'unFollowUser')
                            .text('Unfollow')
                            .fadeOut(50)
                            .delay(50)
                            .fadeIn(50);
        }
    });
});

With this code on page source I see different ID and different text on button but when click second time I call first button like it had never changed. Is there some way to refresh memory for that element or I do wrong thing from start?

I had found solution with this question: stackoverflow.com/questions/38686742/… — Stevan Tosic
– Stevan Tosic, Commented Aug 7, 2016 at 20:05

Haresh Vidja · Accepted Answer · 2016-07-25 11:32:43Z

3

I think your code should like this

{% if followsId == null %}
            <div data-action="follow" class="follow" data-user-id="{{ profileUserData.id }}">
                Follow
            </div>
 {% else %}
            <div data-action="unfollow" class="follow" data-user-id="{{ followsId }}">
                Unfollow
            </div>
 {% endif %}

No need to store current logged in user id, because you can grab it from session :)

Your Ajax Code should be like this

$('.follow').click(function () {
    var _this= $(this);
    var userId = $(this).data('user-id');
    var action =$(this).data('action');

    $.ajax({
        method: 'POST',
        url: "/sci-profile/profile/follow",
        data: {
            profileUserId: userId,
            action: action
        },
        success: function(response)
        {
            if(action=="follow")
            {
                 _this.attr('data-action', 'unfollow').text('Unfollow');
            }
            else
            {
                 _this.attr('data-action', 'follow').text('Follow');
            }
        }
    });
});

Hope you like my answer and up vote it, mark as correct if it is correct :)

edited Jul 25, 2016 at 11:32

answered Jul 25, 2016 at 9:46

Haresh Vidja

8,4713 gold badges29 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Taha Paksu Over a year ago

+1, and you might want to use $(document).on("click",".follow",function(event){ var $this = event.target; .. for dynamically appended (ajax maybe) buttons.

Taha Paksu Over a year ago

That's not my question :) I'm just thinking forward as if that would be the asker's next problem :)

Taha Paksu Over a year ago

Rewind it back, this won't work :) you forgot to change the $(this) to _this after the second line.

Collectives™ on Stack Overflow

Change button functionality jQuery

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related