Ajax div to refresh on success not working

Question

I have a DIV which contains how many likes fetching from Mysql database. I click on button which says like and it will go through ajax function like(id1) with parameter.

Ajax use page likes.php and does all job adding to database. And it gives out JSON data as feedback with code zero if successful. And one if fails.

In success section ajax _js.code is one then its already liked. Thus shows us message. But my problem is I cannot refresh DIV likes when code is zero which is success. It either goes to top of the page instead of staying at DIV likes.

For information it also appends hash TAG at the end of URL.

Button line, I want like button which should work as facebook or other major app does. Without moving page on top. And update like button immediately when clicked.

My main page

<input type="checkbox" id="like" onclick="like(<?php echo $_SESSION["id"];?>);"/>
<div id="likes">
<?php
    $like = 0;
    $conditions = "WHERE id = $_SESSION[id]";
    echo $total = $ll->get_likes($conditions); //displaying how many likes
?>
</div>

Ajax

<script>
function like(id1) {

    $.ajax ({
        type: "POST",
        url: "likes.php",
        data: {id: id1 },
        success: function(feedback) {

            var _js = jQuery.parseJSON(feedback); 

            $("#likes").html(_js.message);  //printing message here 
            $("#likes").attr("class", ""); //resetting class of CSS

            if( _js.code == 0) {
                 /**I want to refresh DIV likes after this **/
            } else {
                 $("#likes").addClass("red"); //This is working fine, i get message when already liked
           }
      }
  });
}

likes.php

<?php
if ( isset($_POST)) {
     //All PHP staff goes here and its working
     if ( $success) {
         $return = array (
               'code' = 0,
               'message' = ""
               );
     } else {
         $return["code"] = 1;
         $return["message"] = "You already liked";
     }
     echo json_encode($return);//Converting PHP into JSON format
}
?>

Answer 1

if you want to display no of likes on success the change your code as follows

In likes.php

<?php
if ( isset($_POST)) {
     //All PHP staff goes here and its working
     if ( $success) {
         $return = array (
               'code' => 0,
               'message' => "",
               'likes_count' => $likes_count //get updated likes count from db
               );
     } else {
         $return["code"] = 1;
         $return["message"] = "You already liked";
         //here you do not need to send the like count
     }
     echo json_encode($return);//Converting PHP into JSON format
}
?>

javascript code

function like(id1) {

    $.ajax ({
        type: "POST",
        url: "likes.php",
        data: {id: id1 },
        success: function(feedback) {

            var _js = jQuery.parseJSON(feedback); 

            $("#likes").html(_js.message);  //printing message here 
            $("#likes").attr("class", ""); //resetting class of CSS

            if( _js.code == 0) {
                 /**I want to refresh DIV likes after this **/
                 $('#likes').html(_js.likes_count);//this will update your likes count
            } else {
                 $("#likes").addClass("red"); //This is working fine, i get message when already liked
           }
      }
  });
}

Answer 2

@tashi,

There is a syntax error in likes.php. Use => operator when declaring arrays. The code should be as follows.

$return = array (
  'code' => 0,
  'message' => ""
);

Answer 3

change following in HTML and JS

<input type="checkbox" id="like" onclick="return like(<?php echo $_SESSION["id"];?>);"/>



<script>
function like(id1) {

$.ajax ({
    type: "POST",
    url: "likes.php",
    data: {id: id1 },
    success: function(feedback) {

        var _js = jQuery.parseJSON(feedback); 

        $("#likes").html(_js.message);  //printing message here 
        $("#likes").attr("class", ""); //resetting class of CSS

        if( _js.code == 0) {
             /**I want to refresh DIV likes after this **/
        } else {
             $("#likes").addClass("red"); //This is working fine, i get message when already liked
       }
  }
});
return false; 
}