jQuery (this) as succession of jQuery Ajax? - php

Question

In this script, I'm fetching a load of data from a MySQL aray, and adding in a little favourite button on each array of returned data, the code for that is
...php while code to fetch array...
...more output...
<a class="favlink" id="'.$row['id'].'">favourite</a>
..more output...
and from that, I've used this bit of jQuery to run a PHP script:
<script>
$(function() {
$(".favlink").bind("click", function() {
$.ajax({
type: "GET",
data: "v="+$(this).attr("id"),
url: "fav.php",
success: function(data) {
alert('asf');
}
});
});
});
</script>
That works fine, but what I actually want to do, is change the success to something like this:
success: function(data) {
$(this).html("<font color='#ccc'><a href='#'>favourited</a></font>");
}
And, that didn't work!
Is there any way I can change the clicked favourite link to a different font color / and change the text from 'favourite' to 'favourited'?
I assume the 'this' property is no longer 'this' on success for some reason, but I'm not sure?
Thank You!

Answer 1

You have to define the context of the ajax. See the docs from Jquery site:
contextObject This object will be made the context of all Ajax-related
callbacks. By default, the context is an object that represents the
ajax settings used in the call ($.ajaxSettings merged with the
settings passed to $.ajax). For example specifying a DOM element as
the context will make that the context for the complete callback of a
request, like so:
$.ajax({
url: "test.html",
context: document.body,
success: function(){
$(this).addClass("done");
}
});
So in your's case I think this is what you need:
$.ajax({
url: "test.html",
context: this,//OR: $(".favlink")[0], // Depends on your scope.
success: function(){
$(this).html("<font color='#ccc'><a href='#'>favourited</a></font>");
}
});

Answer 2

Add the following line to the $.ajax parameters. By default the context is linked to the $.ajaxSettings of the request. Setting the below line changes the context of this in the ajax request to equal that of the calling method.
context: this,
So your new code will look like this:
<script>
$(function() {
$(".favlink").bind("click", function() {
$.ajax({
type: "GET",
data: "v="+$(this).attr("id"),
url: "fav.php",
context: this,
success: function(data) {
$(this).html("<font color='#ccc'><a href='#'>favourited</a></font>");
}
});
});
});
</script>

Answer 3

$(function() {
$('.favlink').click(function() { // this may match more than one element
var $this = $(this);
$.ajax({
'type': 'GET',
'data': 'v=' + this.id,
'url': 'fav.php',
'success': function(data) {
$this.html('whatever you want');
}
});
});
});
You could also use the context parameter for jQuery.ajax, but I personally think this (hah!) is more readable.