Question

I have this bit of code that repeates.

<div class='commentfloatleft'>
                <button type='button' class='button2' onclick='upvote($id8)'>
                    <img src='images/likebutton.png'    class='upvoteimage' width='12' height='12' alt='PearlSquirrel'/>
                </button>
                <button type='button' class='button2' onclick='downvote($id8)'>
                    <img src='images/unlikebutton.png' width='12' height='12' alt='PearlSquirrel'/>
                </button>
            </div>

When I click on the onclick code for upvote is this:

function upvote(box){
$(this).siblings('.upvoteimage').load('upvote.php?box=' + box);
}

I have tried everything to get this to work. The get function is working, but I can not see any changes in “.upvoteimage”. Does anyone know how to fix this problem. Help would be greatly appreciated. Thanks.

Answer 1

Try this way: set a class “upvote” to your “button” element:

<div class='commentfloatleft'>
                <button type='button' class='button2 upvote' id='$id8'>
                    <img src='images/likebutton.png'    class='upvoteimage' width='12' height='12' alt='PearlSquirrel'/>
                </button>
                <button type='button' class='button2' onclick='downvote()'>
                    <img src='images/unlikebutton.png' width='12' height='12' alt='PearlSquirrel'/>
                </button>
            </div>​

And use this JS code:

$(".upvote").on("click",function(){
    var box=$(this).attr("id");
    $(this).find('.upvoteimage').attr("src",'upvote.php?box=' + box);
    return false;
}​);​