CODEWITHSUNDEEP
javascriptjqueryajax
divHelper11
divHelper11

Reputation: 2208

Ajax success actions

When someone clicks on the "like" button, I am checking in database if the photo was already liked by this person. I am using ajax to check this.

When photo was already liked, the success msg says "already liked", otherwise its empty string.

The problem is that increasing the "current likes" isnt working. I tried to use alert to see the number and it always shows the first number from the first line, its not getting increased by currentLikes++.

What happens actually? I defined the variable globally.

var currentLikes = $(this).next('span').text(); 

$.ajax({
    type: "POST",
    url: "/save_like",
    success: function(msg){
        addLike(msg);
    }
}); 

function addLike(msg){
    if(msg !== 'already liked'){
        currentLikes++;
    }
alert(currentLikes); 
$(this).next('span').html(currentLikes);
}

Upvotes: 0

Views: 394

Answers (3)

Scott Marcus
Scott Marcus

Reputation: 65808

The lines: alert(currentLikes); and $(this).next('span').html(currentLikes); are not inside your AJAX code and will execute BEFORE the AJAX call has completed. Move that code into the addLike function to see the correct value.

Also, change the currentLikes = currentLikes++ code to currentLikes++ because the ++ is at the end of your expression and so it is a "post-increment" operator, it means that the value won't increase until AFTER the current statement is done evaluating. Had you written: currentLikes = ++currentLikes and used a "pre-increment" operator, the value would be increased before the rest of the expression was evaluated and it would work, but just saying currentLikes++ (without reassigning back to currenLikes is better - - it ups the value and stores it in the current variable.

Also, this won't refer to the element you want it to in the callback because this is volatile in JavaScript - - it's object binding changes depending on how the code that contains it is invoked, so you'll need to update that will a correct reference. If you save a reference to the element you wish to work with (and not a property of that element), you can refer to that element later with the variable.

Also, you are getting the original like count out of a span and that will come back to you as a string, you should convert that to a number before doing math with it.

Finally, verify that msg is in fact NOT returning 'already liked' EXACTLY AS YOU HAVE IT IN QUOTES. Remember, strings are literals and they are case-sensitive. If there's even an extra space inmsg`, your code will not work properly.

// Store a reference to the likes element (not any property value of it)
var currentLikeElement = $(this).next('span'); 

// Now, get the old like count out of the DOM and convert to a number
var likeCount = parseInt(currentLikeElement.text(), 10);

alert(likeCount);

$.ajax({
    type: "POST",
    url: "/save_like",
    success: function(msg){
        // Let's make sure msg is cleaned up and ready for comparison
        // by trimming any leading or trailing spaces off of it and forcing
        // it to all lower-case (because we'll be comparing it to lower-
        // case later).
        msg = msg.trim().toLowerCase();
        addLike(msg);
    }
}); 

function addLike(msg){
  console.log(msg);  // <--  What does this return?
  if(msg !== 'already liked'){
        likeCount++;
  }
  alert(likeCount); 

  // Inject the new like count into the stored object reference:
  currentLikeElement.text(likeCount);
}

Upvotes: 1

Zin Min
Zin Min

Reputation: 4685

Based on the your sample code, try to put your like count update script within addLike(msg) function.

function addLike(msg){
  if(msg !== 'already liked'){
    currentLikes++;
    $(this).next('span').html(currentLikes);
  }
}

Upvotes: 0

Zaur Amikishiyev
Zaur Amikishiyev

Reputation: 378

replace currentLikes = currentLikes++; with currentLikes++;

and put $(this).next('span').html(currentLikes); into your addLike function

Upvotes: 2

Related Questions