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