Can't change number of likes for post in tape

Question

I am trying to learn django and a bit more. Got a problem with counting number of likes for every post in tape. Problem is that I can not get id of post. If I refresh page, count of likes changes. But to make it changing with ajax is real problem. Please explain me how make changing likes count for every post in tape, if click like button.

Ajax code.

{% block jquery %}

function updatePostLikesCount(){
    var postlikescount = $(".post-likes-count")
    $.ajax({
        type: "GET",
        url: "/like_post/{{ post.id }}/post_likes_count/",
        success: function(data){
            postlikescount.html(data.count);
        },
        error: function(response, error){
        }
    })
}

$(".post-like").click(function(event){
    var img = $(this);
    event.preventDefault();
    $.ajax({
        url: img.parent().attr('href'),
        success: function(){
            updatePostLikesCount();
        },
        error: function(response, error){
        }
    })
});

{% endblock %}

Here is tape of posts.

{% for post in tape %}
    ...
    {{ post.text }}
    ...
    <a href="/like_post/{{ post.id }}/">
        <img class="post-like"  src="{% static "" %}"/>
    </a>

            <span class="post-likes-count" >
                {{ post.like.liked_users.count }}
            </span>

{% endfor %}

Here is a view that count post's likes

def post_likes_count(request, post_id, *args, **kwargs):
    if request.is_ajax():
        like = Like.objects.get(post_id=post_id)
        if like.liked_users.count == None:
            count = 0
        else:
            count = LikeTimestamp.objects.filter(like_id=like.id).count()
        return JsonResponse({
            'count': count,
        })
    else:
        raise Http404

Else I tried to reload an element of page with likes , but was defeated :-)

Answer 1

Some ways to improve this.

First ... you always want the html for the count to exist and should only hide it if there are no likes or show as zero. Otherwise you would need to add the html with javascript when first like is voted

Next

var postlikescount = $(".post-likes-count");

This will include all elements with that class in the page .... not the specific one you want when you click the button.

Instead you could pass the one you want into updatePostLikesCount() as an argument

Change

function updatePostLikesCount(){
        var postlikescount = $(".post-likes-count");

to

function updatePostLikesCount(postlikescount){

And in the click handler modify so we pass in the appropriate element

success: function() {
     // which count element
     var $countElement = img.next();
     // pass to function
     updatePostLikesCount($countElement);
}

Answer 2

Updated:

{% block jquery %}
    function updatePostLikesCount(postlikescount){
        $.ajax({
            type: "GET",
            url: "/like_post/"+postlikescount.data().id+"/post_likes_count/",
            success: function(data){
                alert('class is '+postlikescount.parent().find('.post-likes-count').attr('class'));
                postlikescount.parent().find('.post-likes-count').html(data.count).show();
                alert('likes count '+data.count);
            },
            error: function(response, error){
            }
        })
    }

    $(".post-like").click(function(event){
        var img = $(this);
        event.preventDefault();
        $.ajax({
            url: img.parent().attr('href'),
            success: function(){
                var like = img.parent();
                updatePostLikesCount(like);
            },
            error: function(response, error){
            }
        })
    });
{% endblock %}

Change the view slightly like this(adding data-id):

{% for post in tape %}
    ...
    {{ post.text }}
    ...
    <a href="/like_post/{{ post.id }}/" data-id="{{post.id}}">
        <img class="post-like"  src="{% static "" %}"/>
    </a>

     <span class="post-likes-count" {% if post.like.liked_users.count == 0 %}style="display:none;"{% endif %}>
                {{ post.like.liked_users.count }}
     </span>
{% endfor %}