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);
}
}
);
});
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);
}
}
);
});
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.
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);
}
});
});