changing the image on jquery success function?

Question

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>

Answer 1

UPDATE:

Further to the updated question, span elements don't have a src attribute.

You also have another major issue. You are assigning the same id to more than one element: This is happening for the vote_up and vote_down links.

From what I am understanding, you may want to simply assign a unique id to each vote_up and vote_down link, and them simply change their background url within the success callback.

---

2nd UPDATE:

Let's assign a unique id to each vote_up and vote_down link:

<a ... class='vote_up' id='vote_up<?php echo $row['id']; ?>'> ...
<a ... class='vote_down' id='vote_down<?php echo $row['id']; ?>'> ...

Then you can try to replace the problematic attr() call with this:

$("#vote_up" + the_id).css("background-image", "url(images/downvoteActive.png)");

---

Previous Answer:

You're trying to change the src attribute of a span element. I guess that should be an img, but you can leave out the tag name from the selector:

$("#vote_buttons"+the_id).attr("src", "images/downvoteActive.png");

Answer 2

Your selector says "span#vote_buttons", not "img#vote_buttons". Selectors based on "id" values don't need the tag name, and usually it's a good idea to leave that off.