Vinand Vinand - 26 days ago 6
Javascript Question

Issue with implementing likes functionality. Function works only once

Like or dislike function works only once as if "liked" variable is no more true or false, which would be valid values. First time it works fine (both like and dislike ), but second time 'else' alert appears, which is absolutely unclear to me. Could you please explain what may be wrong there? Bool in html is updated correctly as I checked via alert.

HTML with little django template code, don't pay attention :

<div class="incriminate_like" data-post-pk="{{ answer.pk }} " data-who-likes-id="{{ request.user.id }} " >

<div class="data_div" data-bool="false">
<img class="like_image" src="{% static "img/like.png" %}"/>
</div>
</div>


JQUERY:

$('.incriminate_like').click(function(){

var post_pk = $(this).data("post-pk");
var who_likes_id = $(this).data("who-likes-id");
var that = $(this);
var liked = $(this).find(".data_div").data("bool");

function makeLiked(){

that.find("img").attr("src","{% static 'img/likered.png' %}");
that.find(".data_div").data("bool","true");
// just incriminating
var like_number_original = that.next().html();
var integer_of_like_number_original = parseInt(like_number_original);
var plus_one_number = integer_of_like_number_original + 1
that.next().html(plus_one_number);

}

function makeDisliked(){

that.find("img").attr("src","{% static 'img/like.png' %}");
that.find(".data_div").data("bool","false");
// just incriminating
var like_number_original = that.next().html();
var integer_of_like_number_original = parseInt(like_number_original);
var plus_one_number = integer_of_like_number_original - 1
that.next().html(plus_one_number);


}

if (liked == false) {
ajaxPost('/like/', {'post_pk': post_pk,'who_likes_id':who_likes_id,'whom_id':whom_id}, function(){
makeLiked();


})
}


else if (liked == true ) {

ajaxPost('/dislike/', {'post_pk': post_pk,'who_likes_id':who_likes_id,'whom_id':whom_id}, function(){
makeDisliked();



})




}



else {

alert('error');
}

})

Answer

Problem is that if you call makeLiked() or makeDisliked(), you set data-bool value to string, so that's why liked == true (and even liked == false) returns simply false. Try setting things like:

that.find(".data_div").data("bool", true);

(note that second parameter is without "")


So final code should like that:

$('.incriminate_like').click(function() {

  var post_pk = $(this).data("post-pk");
  var who_likes_id = $(this).data("who-likes-id");
  var that = $(this);
  var liked = $(this).find(".data_div").data("bool");

  function makeLiked() {

    that.find("img").attr("src", "{% static 'img/likered.png' %}");
    that.find(".data_div").data("bool", true);
    // just incriminating 
    var like_number_original = that.next().html();
    var integer_of_like_number_original = parseInt(like_number_original);
    var plus_one_number = integer_of_like_number_original + 1
    that.next().html(plus_one_number);

  }

  function makeDisliked() {

    that.find("img").attr("src", "{% static 'img/like.png' %}");
    that.find(".data_div").data("bool", false);
    // just incriminating 
    var like_number_original = that.next().html();
    var integer_of_like_number_original = parseInt(like_number_original);
    var plus_one_number = integer_of_like_number_original - 1
    that.next().html(plus_one_number);


  }

  if (liked == false) {
    ajaxPost('/like/', {
      'post_pk': post_pk,
      'who_likes_id': who_likes_id,
      'whom_id': whom_id
    }, function() {
      makeLiked();


    })
  } else if (liked == true) {

    ajaxPost('/dislike/', {
      'post_pk': post_pk,
      'who_likes_id': who_likes_id,
      'whom_id': whom_id
    }, function() {
      makeDisliked();



    })




  } else {

    alert('error');
  }

})
Comments