[Answered ]-How I can convert the `{'c_like': '99', 'count': 1}` to the colour like button and count the likes in Django

by

1👍

✅

You can use data-attribute to check whether to add or remove color from button or not and also pass this inside your function to identify the button which is clicked . Then , inside success function of check if the data-attribute has add or remove value depending on this change your color and also change value of total counts .

Changes you can make in your django code :

 {% if not request.user in node.likes.all %}  
   //pass `this` as well.. also add some attr   
    <button style="color: #aaaaaa;" onclick="addLikeToComment('{{ node.id }}',this)"  class="remove-default-btn  p-0 border-0 " type="submit"  style="border: none; color: #aaaaaa;" data-text="add">    
        <svg  width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16" >
          //some codes
        <span class="ml-1"  id="span_like">{{ node.likes.all.count }}</span></svg>
     </button>
      {% else %}
    
    <button style="color: red;"  onclick="addLikeToComment('{{ node.id }}',this)" class="remove-default-btn btn btn-dinger p-0 border-0 " type="submit" class="remove-default-btn like-btn{{ request.path }}" style="border: none; color: #aaaaaa;" data-text="remove">
            //somecodes
       <span class="ml-2">{{ node.likes.count }}</span></svg>
    </button>
  {% endif %}

Demo Code :

function addLikeToComment(id, el) {
  var button_clicked = $(el)
  var likeText = $(el).data("text"); //get text
  /*$.ajax({
    type: 'POST',
    url: '{% url "video:like_comment" %}',
    data: {
      like_id: id,
      action: 'add_like',
      csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
    },
    success: function(response) {*/

  if (likeText === 'add') {
    //change  colour
    button_clicked.css({
      "color": "red"
    });
    //change text
    button_clicked.data("text", "remove")
    //increase value
    button_clicked.find("span").text(parseInt(button_clicked.find("span").text()) + 1)
  } else {
    ///same as above
    button_clicked.css({
      "color": "#aaaaaa"
    });
    button_clicked.data("text", "add")
    button_clicked.find("span").text(parseInt(button_clicked.find("span").text()) - 1)
  }

  /* },
  })*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!--pass this as well and add data-text-->
<button style="color: #aaaaaa;" onclick="addLikeToComment(1 ,this)" class="remove-default-btn  p-0 border-0 " type="submit" style="border: none; color: #aaaaaa;" data-text="add">
    <svg  width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16" >
      <path  d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
    <span class="ml-1">13</span></svg>

</button>


<button style="color: red;" onclick="addLikeToComment(2,this)" class="remove-default-btn btn btn-dinger p-0 border-0 " type="submit" class="remove-default-btn like-btn{{ request.path }}" style="border: none; color: #aaaaaa;" data-text="remove">
        <svg   width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16" >
          <path d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
        <span class="ml-2">17</span></svg>
    </button>
👤Swati

Leave a comment