[jQuery] Live increment update

JavaScript
1

Hello I am working on a voting script.

So far I have this placed in a PHP while loop.

jQuery("#up a").click(function () {
    $.ajax({
    type: "POST",
    url: "vote.php?up=<? echo  $row['post_id']; ?>",
    
    }); 
});

$row['vote_count'] // Displays the number of votes

When a user clicks the button it processes the vote.php page and adds a vote to the database. How can I use jQuery to simply increment the $row[‘vote_count’] result by +1 without refreshing the page.

2

The most simple way would be to declare a var outside of the click scope that you can increment with each click:

var totalVotes = <? echo $row['vote_count']; ?>;

$("#up a").click(function () {
    $.ajax({
        type: "POST",
        url: "vote.php?up=<? echo  $row['post_id']; ?>",
        success: function() {
            totalVotes++;
        }
    }); 
});

On a side note i found the following two things that you should watch out for next time when coding in JavaScript:

  1. You mixed your jQuery declarations between $ and jQuery, you should use either one or the other but never both at the same time as it’s bad practice in my opinion
  2. You had an extra comma in your object you passed into your $.ajax() method, this will cause an error in IE so just something to watch out for