Question

I am using ajax to make a small voting app. When you click +1 to vote up an item the following code runs, adding one to its vote count then the php returns a reordered list of items by votes. What I want is the voted up item to turn green. The code to change the colour will have to run after the items have been reordered and retrieved.

Below is one the block of code. Text in between is discussing what that particular part is doing.

$(function(){
  $(".plus").live('click', function() {
      var plus = $(this).data('plus');
      var dataString = "plus="+plus;

The next line of code gets the parent element of the clicked button with class .heading and animates its background colour to green to show it has been voted up. This works fine except that you only see it for a second because on success of item being voted up they are retrieved and output again to reorder them by votes.

$(this).parents(".itemheading").stop().animate({ backgroundColor: "#cdeb8b"}, 100);

        $.ajax({
      type: "POST",
      url: "bin/processButtons.php",
      data: dataString,
      success: function() {

        $.ajax({url: 'retrieve.php', dataType: 'json'}).done(function(data) {


            var html = data['html'];
            $('#content')
                .html(data['html'])

What I want to do is move the line of code to here so that it animates the colour AFTER the items have been voted up and then retrieved. This it no longer works because the $(this) needs to be done on the button just after it has been clicked.

 $(this).parents(".itemheading").stop().animate({ backgroundColor: "#cdeb8b"}, 100); 
    });
      }
     });
    return false;
    });
});

Thanks.

Answer 1

Assuming I’m understanding your question correctly, you want to be able to keep $(this) for use later on?

In which case, you should just be able to store it in a variable:

var reference = $(this);

//A chunk of code.

$.ajax({url: 'retrieve.php', dataType: 'json'}).done(function(data) {
    //The HTML stuff...
    reference.parents(".itemheading").stop().animate({ backgroundColor: "#cdeb8b"}, 100);
}

Should do it.
If you define reference in the function, you should be able to access it inside any AJAX success functions you define within that function (if that makes sense).

The other way to do it is as we discussed in the comments below here – use your PHP to assign each answer a specific ID and store a reference to that instead…

var reference = $(this).attr("id");
//A chunk of code.

$.ajax({url: 'retrieve.php', dataType: 'json'}).done(function(data) {
    //The HTML stuff...
    $("#" + reference).parents(".itemheading").stop().animate({ backgroundColor: "#cdeb8b"}, 100);
 }