CODEWITHSUNDEEP
javascriptjquery
user3475724
user3475724

Reputation:

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');
        }

                                  })

Upvotes: 1

Views: 34

Answers (1)

Damian Bartosik
Damian Bartosik

Reputation: 498

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');
  }

})

Upvotes: 0

Related Questions