CODEWITHSUNDEEP
javascriptjqueryhtmlimagefadein
getaway
getaway

Reputation: 8990

jquery problem?

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)

Upvotes: 2

Views: 164

Answers (3)

FRotthowe
FRotthowe

Reputation: 3662

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.

Upvotes: 1

STW
STW

Reputation: 46366

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

Upvotes: 5

mway
mway

Reputation: 4392

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.

Upvotes: 0

Related Questions