I'm working on a little reddit-like site which allows users to browse a page of links and click on either an up arrow or a down arrow for each entry.
I've run into this problem that I can't wrap my head around, though it should be really simple:
I can't get my Ajax to keep track of which story has been voted on so that it's vote count can be updated without refreshing the page. See, I'm using prototype's Ajax.Request, and even though I'm using closures, I can't seem to be able to pass values in the OnComplete parameter.
Here's the Ajax I'm using for a downvote:
function downVote(id) {
var url = 'vote.php';
var pars = 'id=' + id + '&v=minus';
var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, onLoading: function(){ showLoad(id); }, onComplete: function() { showResponse(id, originalRequest) } } );
}
function showLoad(id) {
var loadID = getElementById('load_' + id);
loadID.style.display = 'block';
}
function showResponse (id, originalRequest) {
var newData = originalRequest.responseText;
$('load_' + id).style.display = 'none';
$('votes_' + id).innerHTML = newData;
}
and this is the respective php for making a downvote:
<div class="votes" id="votes_<?=$row['ID'];?>"><?=$heads->getVotes($row['ID']);?></div>
<a class="downarrow" href="#" <? if (!isset($_COOKIE['downvote_'.$row['ID']])) {
print 'id="" onclick="downVote(' . $row['ID'] . ')"';
} else {
print 'id="voted" ';
} ?>
></a>
It's pretty sloppy code, I know, but is it clear what I'm trying to do? I have a bunch of listings on the page, so when a user clicks on an arrow for one listing, the script needs to identify the listing that has been voted on and update it. I've tried to pass the id parameter into the showResponse() function, then use $('votes_' + id).innerHTML = newData;
to get the right numbers to update, but this doesn't work. Anyone know why, or of another way to accomplish this?