i have this jquery voting script, everything is working fine, it just that the image at the success function of the ajax request is not changing the image?
jquery:
$("a.vote_down").click(function(){
//get the id
the_id = $(this).attr('id');
//the main ajax request
$.ajax({
type: "POST",
data: "action=vote_down&id="+$(this).attr("id"),
url: "votes.php",
success: function(msg)
{
$("span#votes_count"+the_id).fadeOut();
$("span#votes_count"+the_id).html(msg);
$("span#votes_count"+the_id).fadeIn();
// this is my problem here
$("span#vote_buttons"+the_id).attr("src", "images/downvoteActive.png");
}
});
});
html:
<span class='vote_buttons' id='vote_buttons<?php echo $row['id']; ?>'>
<a href='javascript:;' class='vote_up' id='<?php echo $row['id']; ?>'>Vote Up!</a>
<a href='javascript:;' class='vote_down' id='<?php echo $row['id']; ?>'>Vote Down!</a>
css:
a.vote_up, a.vote_down {
display:inline-block;
background-repeat:none;
background-position:center;
height:16px;
width:16px;
margin-left:4px;
text-indent:-900%;
}
a.vote_up {
background:url("images/upvote.png");
}
a.vote_down {
background:url("images/downvote.png");
}
</span>