Django3 Like Ajax Button Book By Antonio Mele

Question

It works but when press like button it coun 2099 instead of 1, after refresh it turn 1..when unlike same problem happend...It counts correctly after refresh....before refresh it count 2099 or 3011 random number

I tried some solution from stackoverflow but it didn't give me much better result..

Ajax:

{% block domready %}
  $('a.like').click(function(e){
    e.preventDefault();
    $.post('{% url "images:like" %}',
      {
        id: $(this).data('id'),
        action: $(this).data('action')
      },
      function(data){
        if (data['status'] == 'ok')
        {
          var previous_action = $('a.like').data('action');

          // toggle data-action
          $('a.like').data('action', previous_action == 'like' ?
          'unlike' : 'like');
          // toggle link text
          $('a.like').text(previous_action == 'like' ? 'Unlike' :
          'Like');

          // update total likes
          var previous_likes = parseInt($('span.count .total').text());
          $('span.count .total').text(previous_action == 'like' ?
          previous_likes + 1 : previous_likes - 1);
        }
      }
    );
  });
{% endblock %}

HTML:

 {% with total_likes=image.users_like.count users_like=image.users_like.all %}
    <div class="image-info">
      <div>
        <span class="count">
          <span class="total">{{ total_likes }}</span>
          like{{ total_likes|pluralize }}
        </span>
        <span class="count">
          {{ total_views }} view{{ total_views|pluralize }}
        </span>
        <a href="#" data-id="{{ image.id }}" data-action="{% if request.user in users_like %}un{% endif %}like" class="like button">
          {% if request.user not in users_like %}
            Like
          {% else %}
            Unlike
          {% endif %}
        </a>
      </div>
      {{ image.description|linebreaks }}
    </div>
    <div class="image-likes">
      {% for user in users_like %}
        <div>
          <img src="{{ user.profile.photo.url }}">
          <p>{{ user.first_name }}</p>
        </div>
      {% empty %}
        Nobody likes this image yet.
      {% endfor %}
    </div>
  {% endwith %}
{% endblock %}

Jquery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/js-cookie@2.2.1/src/js.cookie.min.js"></script>
    <script>
      var csrftoken = Cookies.get('csrftoken');
      function csrfSafeMethod(method) {
        // these HTTP methods do not require CSRF protection
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
      }
      $.ajaxSetup({
        beforeSend: function(xhr, settings) {
          if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
          }
        }
      });
  
      $(document).ready(function(){
        {% block domready %}
        {% endblock %}
      });
    </script>

Answer 1

In your current jquery code you are targetting all classes ie: $('span.count.total') this will get all classes values that's the reason you are seeing random numbers. Instead you can use selector.closest(".image-info").find(.. to target only count span where a tag has been clicked same for $('a.like') use $(this) .

Demo Code :

 $('a.like').click(function(e) { var selector = $(this) //use this e.preventDefault(); /*$.post('{% url "images:like" %}', { id: $(this).data('id'), action: $(this).data('action') }, function(data) { if (data['status'] == 'ok') {*/ var previous_action = selector.data('action'); selector.text(previous_action == 'like'? 'Unlike': 'Like'); //update action of only a tag which is been clicked selector.data('action', previous_action == 'like'? 'unlike': 'like'); //get span total var previous_likes = parseInt(selector.closest(".image-info").find('span.count.total').text()); selector.closest(".image-info").find('span.count.total').text(previous_action == 'like'? previous_likes + 1: previous_likes - 1); /* } } );*/ });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="image-info"> <div> <span class="count"> <span class="total">55</span> likes </span> <span class="count"> 87 view </span> <a href="#" data-id="1" data-action="like" class="like button"> Like </a> </div> Somethings.. </div> <div class="image-info"> <div> <span class="count"> <span class="total">5</span> likes </span> <span class="count"> 82 view </span> <a href="#" data-id="2" data-action="unlike" class="like button"> Unlike </a> </div> Somethings.. </div>