Comparison doesn't work on first call
Purpose: vote.php restricts voting on each post to one per IP. JQuery checks the old vote value against the new vote value. If the vote increases, the image changes. If the voice decreases, the picture changes. If the vote does not change, the image remains the default.
Problem: Script still changes the image on first run, even if the values are equal (noted with window.alert). All performances after the first launch work as intended.
Problem code:
if (window.f != voteTotal.text()) {
//alert place here. voteTotal.text() && window.f are equal
if (votetype == "up") {
$('.bg').attr('src', 'tear.gif');
window.t=setTimeout('changeBack()', 3000);
}
else if (votetype =="down") {
$('.bg').attr('src', 'happy.gif');
window.t=setTimeout('changeBack()', 3000);
}
else {
changeBack();
}
}
else if(window.f == voteTotal.text()){
changeBack();
}
else {
changeBack();
}
var f is declared outside the function and given value as soon as the function is called by the user clicking the voting option.
Complete code:
var t;
var f;
function vote(vote_id, votetype) {
window.f = $('#vote' + vote_id).text();
$.post('vote.php', {id: vote_id, type: votetype },
function(output) {
$('#vote' + vote_id).html(output).show();
colorChange(vote_id, votetype);
});
}
function colorChange(vote_id, votetype) {
var voteTotal = $('#vote' + vote_id);
if (window.f != voteTotal.text()) {
if (votetype == "up") {
$('.bg').attr('src', 'tear.gif');
window.t=setTimeout('changeBack()', 3000);
}
else if (votetype =="down") {
$('.bg').attr('src', 'happy.gif');
window.t=setTimeout('changeBack()', 3000);
}
else {changeBack();}
}
else if(window.f == voteTotal.text()){
changeBack();
}
else {
changeBack();
}
}
function changeBack() {
$('.bg').attr('src', 'bg.gif');
}
So where did I go wrong?
This code is included in my .html header inside the header tags. You can see the .js file. That's all there is.
if (window.f == voteTotal.text()) {window.alert('They are equal');}
else { window.alert('They are not equal: ' + voteTotal.text() + ' ' +window.f); }
This works, just not the first time.
source to share
Since you are getting the total votes from the html element, try trimming it first. Since this is only done on first run, there might be something with the markup for that specific element in the html itself, which I would go and change there. The identifier personally receives the vote count from the server.
I've also removed some things from the colorchange function.
function vote(vote_id, votetype) {
window.f = $.trim($('#vote' + vote_id).text());
$.post('vote.php', {id: vote_id, type: votetype },
function(output) {
$('#vote' + vote_id).html(output).show();
colorChange(vote_id, votetype);
});
}
function colorChange(vote_id, votetype) {
var voteTotal = $('#vote' + vote_id);
if (window.f != $.trim(voteTotal.text())) {
//alert place here. voteTotal.text() && window.f are equal
if (votetype == "up") {
$('.bg').attr('src', 'tear.gif');
window.t=setTimeout('changeBack()', 3000);
}
else if (votetype =="down") {
$('.bg').attr('src', 'happy.gif');
window.t=setTimeout('changeBack()', 3000);
}
}else {
changeBack();
}//if
}//changeColor
source to share