Ajax и Django Кнопка Like

Я сделал кнопку like с Ajax и она работает, но только когда я нажимаю на 1-й пост, счетчик like_count обновляет мгновенное значение. Для 2-го и последующих постов значение like_count не меняется после нажатия на кнопку.

** Когда я нажимаю на кнопку like второго и последующих постов, я вижу изменение значения like_count первого поста. Когда я обновляю страницу, я вижу, что значение 2-го и последующих постов изменилось.**

Моя проблема в том, что я хочу, чтобы значение like count менялось мгновенно для 2-го и последующих постов.

может ли это быть проблемой (id="like_count")

myviews.py

@login_required(login_url="login")
def like(request):
    if request.POST.get('action') == 'post':
        result = ''
        id = request.POST.get('postid')
        post = get_object_or_404(Post, id=id)
        if post.likes.filter(id=request.user.id).exists():
            post.likes.remove(request.user)
            post.like_count -= 1
            result = post.like_count
            post.save()
        else:
            post.likes.add(request.user)
            post.like_count += 1
            result = post.like_count
            post.save()

        return JsonResponse({'result': result, })

mybutton.html

      {% if request.user.is_authenticated %}
        {% if post.like_count >= 2 %}
        <button style="margin-top: 10px;" class="btn btn-light like_button_true like-button" value="{{ post_item.id }}">
          <img style="width: 32px; height:32px;" src="{% static 'img/likeTrue.png' %}" />
          <br>
          <span id="like_count">{{post_item.like_count}}</span>
        </button>
        {% else %}
          <button style="margin-top: 10px;" class="btn btn-light like_button_detail like-button" value="{{ post_item.id }}">
            <img style="width: 32px; height:32px;" src="{% static 'img/likeFalse.png' %}" />
            <br>
            <span id="like_count">{{post_item.like_count}}</span>
          </button>
        {% endif %}
      {% endif %}

myscript

<script>
  $(document).on('click', '.like-button', function (e) {
    e.preventDefault();
    $.ajax({
      type: 'POST',
      url: '{% url "like" %}',
      data: {
        postid: $(this).val(),
        csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
        action: 'post'
      },
      success: function (json) {
        document.getElementById("like_count").innerHTML = json['result']
      },
      error: function (xhr, errmsg, err) {

      }
    });
  })
</script>

Здесь я вижу больше проблем в проекте, но, конечно, у вас также есть проблема с одинаковыми id на html странице. id для html элемента должен быть уникальным.

  {% if request.user.is_authenticated %}
    <button style="margin-top: 10px;" class="btn btn-light like_button_true like-button" value="{{ post_item.id }}">
      {% if post.like_count >= 2 %}
        <img style="width: 32px; height:32px;" src="{% static 'img/likeTrue.png' %}" />
      {% else %}
          <img style="width: 32px; height:32px;" src="{% static 'img/likeFalse.png' %}" />
      {% endif %}
      <br>
      <span id="like_count_{{ post.id }}">{{post_item.like_count}}</span>
    </button>
  {% endif %}

и в сценарии: 

  <script>
    ...
    success: function (json) {
      document.getElementById("like_count_" + $(this).val()).innerHTML = json['result']
    },
    ...
  </script>
Вернуться на верх