CODEWITHSUNDEEP
phpjqueryhtmlcssajax
LightningWrist
LightningWrist

Reputation: 937

How do I actively increment my counter based off of my AJAX results?

I am on the final step of my first ajax project. I've made a thumbs up icon that when pressed increments a column in the database via this code:

HERE IS THE HTML AND JQUERY ON THE VIEWABLE PAGE

<div id="comment_id">+1</div>
<div id="thumb_thumb">                              
    <?php $comment_id = $result['id'];?>
    <a class="myButtonLink" href="Profile_test.php?id=<?php echo $prof->id; ?>" id="<?php echo $comment_id; ?>">Vote Up!</a>
</div>

    <script>
    $('.myButtonLink').click(function(e) {
      e.preventDefault();
      var comment_id = $(this).attr('id');
      $.ajax({ type: 'POST',
               url: 'thumbs.php',
               data: 'comment_id=' + comment_id,
               success: function(data) {
                  alert(data);
                  if(data.result == "error") {
                      alert(data.msg);
                 } else {
                      $('#numvotes').html(data.msg);
                 }
             }
      });
    });        
    </script>

HERE IS THE HIDDEN PHP PAGE IT IS SENT TO

    <?php
     require_once($_SERVER['DOCUMENT_ROOT']
     . '/includes/system/init.php');

     // 1. CHECK AND SEE IF THE
     "$comment_id" IS VALID. I AM GOING TO
     RETREIVE THE VALUE OF THE $_POST BEING
     SENT FROM THE PHP PAGE THAT IS SENDING
     THE REQUEST

     /* QUERY TO CHECK $_POST DATA WITH: */

    /* this is grabbing id that jquery
     sent over via post */
     if(isset($_POST['comment_id'])) {


         /* making a variable out of the
     grabbed id */ $retreived_comment_id =
     $_POST['comment_id'];  


     $query = "UPDATE `CysticAirwaves` SET
     `thumbsUp` = `thumbsUp` + 1 WHERE `id`
     = '" . $retreived_comment_id . "'"; $request =
     mysql_query($query,$connection) ;
     $result = mysql_fetch_array($request);


     }
   ?>

So now I just need to be able to dynamically have my counter work when a thumb is clicked and the specified comment is marked a plus one in the db

<div id="comment_id">
            +1 //NEED TO MAKE THIS ACTUALLY COUNT
</div>

Thanks in advance

Upvotes: 0

Views: 2572

Answers (4)

Matthew Nessworthy
Matthew Nessworthy

Reputation: 1428

Couple of things.

1) You need to make sure the POST value an integer and not arbitrary and/or malicious data

$retreived_comment_id = filter_var($_POST['comment_id'], FILTER_SANITIZE_NUMBER_INT);
if(!is_int($retreived_comment_id)) {
  echo 'error';
  exit;
}

2) It's a good idea to make sure all data is escaped when using user input

$query = "
  UPDATE `CysticAirwaves` 
  SET `thumbsUp` = `thumbsUp` + 1 
  WHERE `id` = ".mysql_real_escape_string($retreived_comment_id)."
"; 

$request = mysql_query($query, $connection);

3) Return 'success' on success and 'error' on failure

$request = mysql_query($query, $connection);
if($request) {
  echo 'error';      
} else {
  echo 'success';
}

exit;

4) Increment the count using jQuery

success: function(data) {
  if(data == "success") {
    var $comment = $('#comment_id');
    $comment.html($comment.text()+1);
  }
}

Upvotes: 1

sadmicrowave
sadmicrowave

Reputation: 40912

I noticed you are not returning anything from your PHP code back to ajax. You need to return an array with at least "msg", and "error" to satisfy your current code on success. Then create another array element for "success" => 1 if there was no errors.

//your php should return your array at the end of your function like this:
return array("msg" => "some message to return", "error" => "some error if you have one", "success" => [1 or 0] );

//ajax function blah blah blah
success: function(data){
    if( data.success == 1 ){
        var currentCount = $("#comment_id").text().substr(1);
        $("#comment_id").text( currentCount+1 );
     }

Upvotes: 0

Adrian B
Adrian B

Reputation: 1631

Put this line at ajax succes request, instead of alert(data)

document.getElementById('comment_id').innerHTML = data;

Upvotes: 0

dynamic
dynamic

Reputation: 48101

var currentCount = $('#comment_id').text();

$('#comment_id').text(++currentCount);

Upvotes: 1

Related Questions