having a problem with jquery votes just like stackoverflow votes?

Question

i have this jquery code with an ajax request that works fine, but the jquery is not displaying the results(vote_count) and changing the upvote image, just like stackoverflow:

jquery code:

$(function(){
    $("a.vote_up").click(function(){
    //get the id
    the_id = $(this).attr('id');

    //the main ajax request
    $.ajax({
        type: "POST",
        data: "action=vote_up&id="+$(this).attr("id"),
        url: "ajax/votes.php",
        success: function(msg)
        {
            //echo the votes count
            $("span#votes_count"+the_id).html(msg);
            //replace the new vote count
            $("span#votes_count"+the_id).fadeIn();
            //replace the image with active arrow
            $("#vote_up"+the_id).attr("src", "img/upvoteActive.png");

        }
    });
});

the html code:

<li class ="record">
<span class="vote_count">$net_vote</span> 

  <a href='#' class='vote_up' id=$id><img src="img/uparrow.png"></a>

  <a href='#' class='vote_down' id=$id><img src="img/downarrow.png"></a>
</li>

to clarify everything again, the ajax request is fine its upvoting the right answer, the problem is in the success bit of the ajax, the new vote count is not showing, and the image is not being replaced to an active arrow(just like stack overflower) thanks :))

Answer 1

In your jQuery code you use #votes_count but the html does not have an id but a vote_count class (without the s).

So it should read span.vote_count

same with the upvote, you use an id to target it but it has a class..

Answer 2

You were incorrectly targetting the spans, and also, sending get parameters over a post request. I have fixed below:

 $(function(){
        $("a.vote_up").click(function(){
        //get the id
        the_id = $(this).attr('id');

    //the main ajax request
            $.ajax({
                type: "POST",
                data: {'action' : 'vote_up','id' : $(this).attr("id")} // here
                url: "ajax/votes.php",
                success: function(msg)
                {
                                    //echo the votes count
                    $("span.vote_count").html(msg); //here
                    //replace the new vote count
                    $("span.vote_count").fadeIn(); // here
                    //replace the image with active arrow
                               $(".vote_up").find(the_id).attr("src", "img/upvoteActive.png"); // and here

                }
            });
        });

Answer 3

Your selectors in the success callback are all wrong. You have <span class="vote_count">...</span> but then try to update it's value as if it had an id: $("span#votes_count"+the_id)...

You probably want your code more like:

success: function(msg) {
  //echo the votes count
  $("span.vote_count#"+the_id).html(msg);
  //replace the new vote count
  $("span.vote_count#"+the_id).fadeIn();
  //replace the image with active arrow
  $(".vote_up#"+the_id).attr("src", "img/upvoteActive.png");
}

So as you can see, you'll also want to add the id of the object into the .vote_count element as well.

Update:

To be clearer, here is the updated markup:

<span class="vote_count" id="$id">$net_vote</span> 
<a href='#' class='vote_up' id="$id"><img src="img/uparrow.png" /></a>
<a href='#' class='vote_down' id="$id"><img src="img/downarrow.png" /></a>

And here is the updated javascript:

$(document).ready( function() {
  $("a.vote_up").click(function(){
    //get the id
    var the_id = $(this).attr('id');

    //the main ajax request
    $.ajax( {
      type: "POST",
      data: "action=vote_up&id=" + the_id,
      url: "ajax/votes.php",
      success: function( msg ) {
        $("span.vote_count#"+the_id).html(msg).fadeIn();
        $(".vote_up#" + the_id + " img").attr("src", "img/upvoteActive.png");
      }
    } );
  } );
} );