Question

I’m building a db driven jokes website where the users can vote the jokes up. When someone votes, the joke’s “score” column in the mysql db is incremented. On success, I’d like the joke’s score updated on the page. I have 2 questions – how do I select the associated score that is displayed and how do I query the database to get the updated value. Here is the jquery to run ajax:

 <script type="text/javascript">
 $(function() {
   $(".votebutton").click(function() {
      var id = $(this).attr('id');
      var ip = $('.ipz').attr('id');
      var dataString = 'id=' + id + '&ip=' + ip;
      $.ajax({
        type: "POST",
        url: "bin/vote.php",
        data: dataString,
        success: function() {
          // find the associated joke's score and query db for new score, or increment it, either is fine.
        }
      });
      return false;
   });
 });
 </script>

And here’s how the joke’s constructed so you can see what the score’s div id is:

 <div class="jokecontainer" id="joke_<?php echo $row['id']; ?>">
      <div class="score" style="float: left; width: 110px; height: 85px;">
           <p class="scorenum" id="score_<?php echo $row['id']; ?>"><?php echo $row['score']; ?></p>
           <p class="scorevote"><a class="votebutton" id="<?php echo $row['id']; ?>" href="#">VOTE UP</a></p>
      </div>
      <div class="joke">
           <span class="joketext"><?php echo $row['joke']; ?></span>
      </div>
      <div class="jokeinfo" style="float: left; width: 200px; height: 85px; margin-top: 5px;">
           <span class="jokeinfo1">Date: </span><span class="jokeinfo2">date</span><br />
           <span class="jokeinfo1">Author: </span><span class="jokeinfo2"><?php echo $row['user']; ?></span><br />
           <span class="jokeinfo1">Category: </span><span class="jokeinfo2"><?php echo $row['category']; ?></span><br />
      </div>
 </div>

The score’s id is this: id=score_ then the id. For example, if a votebutton with id of 123 is clicked, the score’s id would be “score_123”.

I think what I’m trying to do is construct an id selector that has: “score_” and the existing var id:

 var scoreid = "#score_" + id
 $(scoreid).html();

Then the second part – I’m thinking I store the score as a jquery variable and then increment it…. no idea how to start that.

THanks

Answer 1

I’d modify the PHP to return the new score value as a response to an upvote, as a JSON object. Assuming your response is something like (you might want to make this more complex by having it be a representation of your joke object – so you could have more keys and values such as the id as well )

{"newScore" : 12}

//or if you want, something more complex like - note the script below assumes the first JSON string
{"joke":{"id":123456, "score":12, "author":"someone", "date":"2012-12-12T00:00:00"}}

You can then parse the JSON and insert the new score just like you mentioned you were thinking of trying:

<script type="text/javascript">
 $(function() {
   $(".votebutton").click(function() {
      var id = $(this).attr('id');
      var ip = $('.ipz').attr('id');
      var dataString = 'id=' + id + '&ip=' + ip;
      $.ajax({
        type: "POST",
        url: "bin/vote.php",
        data: dataString,
        dataType: 'json', //specify that the response content-type is expected to be JSON
        success: function(data) {
          // expect server to return the updated data score
            if(data.newScore) {
               $("#score_" + id).html(data.newScore);
           }
           else {
            //handle error condition
           }
        }
      });
      return false;
   });
 });
 </script>

This might be of some use if multiple users are voting up at the same time – the second voter will see the correct final value which will be the sum of his vote and the previous voter’s vote (i.e. he will see a +2 result instead of a +1). However, the first voter still sees a stale value and the second voter might get confused by the increase by 2 instead of 1 so this is something you need to think about more if you’d like to get something more real-time, although I think it’s probably not worth it – having a heartbeat that checks for updates of certain content on the page (kinda like here on SO) might be a good compromise.

If you’d rather just increase the value of the current vote on the page by one on success without having the server return anything, you could do something like this (and note that you’d want to optimize this snippet and add some error checking):

success: function() {
    var newScore = parseInt($("#score_" + id).html()) + 1;
    $("#score_" + id).html(newScore);
}