jquery ajax won't work

Question

hey, i'm trying to change the html of a div after an ajax request, the ajax request works. the data is correct but the selector can't seems to find the div

here's the code

$(".home .up_0").click(function(){
  $.post("includes/vote.php",   
        {
         truc : $(this).attr("id")
        },
       function(data){ 
        if(data=='fail') 
        {
          alert("Error.");
        }
        else
        {
          $(this).parents('.home').find('.score_neutre').html(data);
        }
       }
  );
});

Answer 1

This is probably because this isn't what you expect within the inner function. You'll need to add a variable to store the reference:

$(".home .up_0").click(function(){
  var this_obj = $(this);
  $.post("includes/vote.php",   
        {
         truc : $(this).attr("id")
        },
       function(data){ 
        if(data=='fail') 
        {
          alert("Error.");
        }
        else
        {
          this_obj.parents('.home').find('.score_neutre').html(data);
        }
       }
  );
});

Answer 2

It could have something to do with this not representing the $(".home .up_0") element since it's inside the function(data){} success function?

Try adding a dummy div, id="Test" and inside the success function use:

£('#Test').html(data);

This will tell you if it's working. If it is you'll need to use a var to store what this represents.

Answer 3

Your problem is that this is not pointing to what you think it is.

Do this:

$(".home .up_0").click(function(){
  var $this = $(this); // Cache the current `this` as a jQuery wrapped DOM element
  $.post("includes/vote.php",
       { truc : $(this).attr("id") },
       function(data){ 
          if(data=='fail') {
              alert("Error.");
          } else {
              // Reference the cached variable `$this`
              $this.parents('.home').find('.score_neutre').html(data);
          }
       });
});