UP or DOWN Voting in Real-Time jQuery Ajax PHP

Question

Alright, here's a quick explanation of what I am doing: I have a website where people can vote UP or DOWN to a "champion." These champions start with 100 health. If you were to UP vote a specific champion, their health would now be 101. DOWN voting it would be 99.

This site is up and running and has been for 5 seasons now (there's over 1200 members that play). So there's a lot of voting going on at once. It all works fine now. BUT, for this next season, I will be implementing jquery/ajax for "real-time" voting (so the page doesn't need to refresh every time you vote).

The struggle I am having right now with this is, first off, I am not great with ajax/js. However, the main issue is when someone clicks a vote, I need a way to grab the LIVE data from the DB and then throw that into the jquery/ajax query and then output the real data, in real-time (or at least I feel this is what should be done).

There is also a second part to this...people are allowed to vote 3x per hour. There is a notification at the top of the page showing them how many votes they have left, "You have 3 actions remaining." This is again, working fine as is, but I imagine would need to be fixed in with the ajax to be real-time as well.

I hope I explained this well enough. If not, please let me know! Any help would be greatly appreciated!

CODE:

$("a.vote-heal").click(function(){
    var votes;
    var champ;
    var health;
    champ = $(this).attr('id');

    votes = $("#votesLeft").text();
    votes--;

    //the main ajax request
    $.getJSON("/load-champ.php?champ="+champ, function(data) {
        $.each(data, function(i,data) {
            health = data.health;
            health++;
        });
        $.ajax({
            type: "POST",
            url: "/votes.php",
            data: "champ="+champ+"&action=heal",
            success: function(msg) {
                $('#'+champ+' .health-inner').html(health);
                $('#header .vote-remain').html('You have <strong><span id="votesLeft">'+votes+'</span> Actions</strong> remaining');
                $('#'+champ+' .voting').html('<a id='+champ+'" class="button vote-hurt" href="javascript:;">Hurt '+champ+'</a><div class="button vote-heal action-tooltip">Heal '+champ+'</div>');
            }
        });
    });
});

Answer 1

All of this is just database queries that are returned with JSON. Maybe have two actions on the backend - vote and refresh.

In the vote method, first check to see the voter's current count. If there are votes left, have the champion's score go up or down.

Then, return this array:

1. List item
2. Champions votes
3. Votes left
4. Error (if exists)

In the refresh method (which would poll the backend server every x number of seconds or minutes) return the number of current votes.

A fairly easy implementation of ajax.

Hope this helps!

---

EDIT: AJAX learning links

With jQuery, it is super, super easy. Here's how:

• http://api.jquery.com/jQuery.parseJSON/
• http://api.jquery.com/jQuery.getJSON/
• http://php.net/manual/en/function.json-encode.php
• Official website: http://www.json.org/
• http://www.hunlock.com/blogs/Mastering_JSON_(_JavaScript_Object_Notation_)