jquery problem?

Question

i have this jquery problems i have had for days, im so new to this, so excuse my dumbness in this subject. thanks :))

html code:

<ul class="statuses">
<li id="set_23" class="message">
  // this is meant to increase everytime you click the vote_up just like stackoverflow 
  <span class="vote_count">27</span>
  <a href="#" class="vote_up"><img src="img/uparrow.png" /></a>
  <a href="#" class="vote_down"><img src="img/downarrow.png" /></a>

 </li>

</ul>

this is my jquery code:

$(document).ready(function() {
    $('#statuses').delegate('.vote_up', 'click', function() {
       //get the id
        var the_id = $(this).closest('.message').attr('id').split('_').pop();
        //the main ajax request
        $.ajax({
            type: "POST",
            data: "action=vote_up&id=" + the_id,
            url: "ajax/votes.php",
            success: function (msg) {
                  // fade in the new vote_count
                $(this).siblings("span.vote_count").html(msg).fadeIn();
                  // get the child <img> and set its src
                $(this).children("img").attr("src", "img/uparrowActive.png");
            }
        });
    });

});

EDIT: also the jquery fade.in and change of image src is not working, am i referencing the right span or class(the ajax request is working now)

Answer 1

Change this

var the_id = $(this).closest('.message').attr('id').split('_').pop();

to this

var the_id = $(this).parents('.message').attr('id').replace('set_', '');

or alternatively

var the_id = $(this).parent().attr('id').replace('set_', '');

if you know that your link's parent element will always be ul.message.

Answer 2

First thing to jump-out:

<ul class="statuses"> 

and

$('#statuses')

... the # symbol in jQuery is the id-selector (same as CSS). Since your <ul> is set to class="statuses" then you'll need to use the class-selector:

$('.statuses')

That alone will break all your jQuery

Answer 3

From the jQuery docs:

The beforeSend, error, dataFilter, success and complete options all take callback functions that are invoked at the appropriate times. The this object for all of them will be the object in the context property passed to $.ajax in the settings; if that was not specified it will be a reference to the Ajax settings themselves.

So, try adding context: this to your ajax request options.