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>');
}
});
});
});