Jquery for followers not triggering

Question

I want to add the following functionality to a site but need Jquery to change the following to unfollow and vice-versa. Everything seems fine but it's not working. (All the links to jquery work perfectly and load)

Jquery for the functionality

$('a.follow').click(function(e){
    e.preventDefault();

    $.post('{% url "user_follow" %}',
        {
            id: $(this).data('id'),
            action: $(this).data('action')
        },

        function(data){
        if(data['status'] == 'ok' ){var previous_action == $('a.follow').data('action');
            console.log(previous_action);
        // toggle data_action
        $('a.follow').data('action', previous_action == 'follow' ? 'unfollow' : 'follow');

        // toggle link text 
        $('a.follow').text(previous_action =='follow' ? 'Unfollow' : 'Follow');

        // update followers 
        var previous_followers = parseInt($('span.count .total').text());
        $('span.count .total').text(previous_action == 'follow' ? previous_followers + 1 : previous_followers - 1);

        }
    }
    )

    

});

HTML

{% with total_followers=user.followers.count %}
        
            {{ total_followers }}
            follower{{ total_followers|pluralize }}
        
        
            {% if request.user not in user.followers.all %}
            Follow
            {% else %}
            Unfollow
            {% endif %}
        
{% endwith %}

view for on jquery request

@login_required
def user_follow(request):
    user_id = request.POST.get('id')
    action = request.POST.get('action')

    if user_id and action:
        try:
            user = User.objects.get(id=user_id)
            if action == 'follow':
                Contact.objects.get_or_create(
                    user_from=request.user,
                    user_to=user
                )
            
            else:
                Contact.objects.filter(user_from=request.user, user_to=user).delete()
            
            return JsonResponse({'status': 'ok'})
        
        except User.DoesNotExist:
            return JsonResponse({'status': 'error'})

    return JsonResponse({'status': 'error'})

Last note There is a jquery for the like button above the followers' jquery object don't know if its presence has any effect

user_10322398 · Answer

Maybe is not triggering the change because you try to change one element using a class selector. Try triggering the change, with the same selector that you capture the data.

    // toggle data_action
    $(this).data('action', previous_action == 'follow' ? 'unfollow' : 'follow');

    // toggle link text 
    $(this).text(previous_action =='follow' ? 'Unfollow' : 'Follow');

user_10606400 · Answer

You are targetting all .follow class instead you can keep value i.e : this inside some variable and then use it inside your callback . Then , you need to compare value using .text().trim() this will give you Unfollow or Follow depending on this change your .follow class text.Lastly ,to set correct count to your total span you can use prev('span').find('.total') then change total value .

Demo Code :

$('a.follow').click(function(e) {
  e.preventDefault();
  var selector = $(this) //declare this outside your ajax
  /* $.post('{% url "user_follow" %}', {
       id: $(this).data('id'),
       action: $(this).data('action')
     },

     function(data) {
       if (data['status'] == 'ok') {*/
  //get text of a tag and trim it(to remove any white spaces)
  var previous_action = selector.text().trim()
  console.log(previous_action);
  // toggle
  selector.data('action', previous_action == 'Follow' ? 'Unfollow' : 'Follow');

  selector.text(previous_action == 'Follow' ? 'Unfollow' : 'Follow');
  //get the span(total) using prev(.count)->find('total')
  var previous_followers = parseInt($(selector).prev('span').find('.total').text());
  //change the span total value
  $(selector).prev('span').find('.total').text(previous_action == 'Follow' ? previous_followers + 1 : previous_followers - 1);

  /* }
    }
  )*/



});



            12follower

   Follow 



            23 follower

   Unfollow 


            17 follower

   Follow

Jquery for followers not triggering

2 Answers