Queueing old click event values. - php

Question

I have a problem and just can't find where the old values are coming from. What I have is a forum and list of replies where the user has the ability to rate good advice, bad advice on each reply. If you click on one it fires off a java script and the database is updated... the other button hides to show something happened. Where i am running into problems is on a fresh page refresh the first button works as designed but all others are passing not only the next click event values (which the script responds where you have already voted) but is passing ALL the previous clicked values. If I vote on four different posts then all four values post and three showing I have already voted. How can I purge the previous click event values?
<script>
function doGABAbad(forum_post_id,type){
$(".badadviceclick").click(function(){
var element = $(this);
var I = element.attr("id");
var info = 'id=' + I;
$("#gaba_float_right").html('<img src="loader.gif"/>').show();
$.post('updateGABA.php', {forum_post_id: forum_post_id,type: type}, function(data){
if(isNaN(parseFloat(data))){
alert(data);
}else{
$('#'+forum_post_id+'_'+type+'s').text(data);
}
$('#goodadvice'+I).fadeOut(200).show();
});
});
}
</script>
<script>
function doGABAgood(forum_post_id,type){
$(".badadviceclick").click(function(){
var element = $(this);
var I = element.attr("id");
var info = 'id=' + I;
$("#gaba_float_right").html('<img src="loader.gif"/>').show();
$.post('updateGABA.php', {forum_post_id: forum_post_id,type: type}, function(data){
if(isNaN(parseFloat(data))){
alert(data);
}else{
$('#'+forum_post_id+'_'+type+'s').text(data);
}
$('#badadvice'+I).fadeOut(200).show();
});
});
}
</script>
This is where I am building my Div's
<div id="goodadvice'.$forum_post_id.'">
<a id="'.$forum_post_id.'" class="badadviceclick" href="#" onClick="return false" onmousedown="javascript:doGABAgood('.$forum_post_id.',\'goodadvice\');">Good Advice '.$good_advice.'</a>
</div>
<div id="badadvice'.$forum_post_id.'">
<a id="'.$forum_post_id.'" class="badadviceclick" href="#" onClick="return false" onmousedown="javascript:doGABAbad('.$forum_post_id.',\'badadvice\');">Bad Advice '.$bad_advice.'</a>
</div>

Answer 1

The reason for that is you attach events in both javascript and jquery (jquery based event in javascript based event). you need to use one or another.
<script>
function doGABAbad(forum_post_id,type){
var element = $(this);
var I = element.attr("id");
var info = 'id=' + I;
$("#gaba_float_right").html('<img src="loader.gif"/>').show();
$.post('updateGABA.php', {forum_post_id: forum_post_id,type: type}, function(data){
if(isNaN(parseFloat(data))){
alert(data);
}else{
$('#'+forum_post_id+'_'+type+'s').text(data);
}
$('#goodadvice'+I).fadeOut(200).show();
});
}
function doGABAgood(forum_post_id,type){
var element = $(this);
var I = element.attr("id");
var info = 'id=' + I;
$("#gaba_float_right").html('<img src="loader.gif"/>').show();
$.post('updateGABA.php', {forum_post_id: forum_post_id,type: type}, function(data){
if(isNaN(parseFloat(data))){
alert(data);
}else{
$('#'+forum_post_id+'_'+type+'s').text(data);
}
$('#badadvice'+I).fadeOut(200).show();
});
}
</script>

Answer 2

First modify the HTML like so:
<div id="goodadvice'.$forum_post_id.'">
<a id="'.$forum_post_id.'" class="goodadviceclick" href="javascript:void(0);">Good Advice '.$good_advice.'</a>
</div>
<div id="badadvice'.$forum_post_id.'">
<a id="'.$forum_post_id.'" class="badadviceclick" href="javascript:void(0);">Bad Advice'.$bad_advice.'</a>
</div>
Next, you can refactor the functions like so:
function doGABA(e) {
e.preventDefault();
var element = $(this);
var forum_post_id = element.attr("id");
var type = element.hasClass('goodadviceclick') ? 'good' : 'bad';
var info = 'id=' + I;
$("#gaba_float_right").html('<img src="loader.gif"/>').show();
$.post('updateGABA.php', {forum_post_id: forum_post_id, type: type + 'advice'}, function(data){
if(isNaN(parseFloat(data))){
alert(data);
}else{
$('#'+forum_post_id+'_'+type+'s').text(data);
}
$('#' + type + 'advice'+I).fadeOut(200).show();
});
}
Then remove the onmousedown attributes on your anchor tags, and do it in jQuery:
$('.goodaviceclick, .badadviceclick').click(doGABA);