jQuery - can't set css propery in ajax callback function

Question

I'm trying to get an jquery ajax callback function to update the background colour of a table cell, but I can't get it to work.

I have the following code (which produces no errors in Firebug):

$(".tariffdate").click(function () {
   var property_id = $('#property_id').attr("value");
   var tariff_id = $('#tariff_id').attr("value");
   var tariff_date = $(this).attr("id");
   $.post("/admin/properties/my_properties/booking/edit/*", { property_id: property_id, tariff_id: tariff_id, tariff_date:  tariff_date },
function(data){
   var bgcol = '#' + data;
   $(this).css('background-color',bgcol);
   alert("Color Me: " + bgcol);
});

I've added the alert just to confirm I'm getting the expected data back (a 6 digit hexadecimal code), and I am - but the background of my table cell stubbornly refuses to change.

All the table cells have the class .tariffdate but also have individual ID.

As a test, I tried creating a hover function for that class:

$(".tariffdate").hover(function () {
   $(this).css('background-color','#ff0000');
});

The above works fine - so I'm really confused as to why my callback function is not functioning. Any ideas?

Answer 1

Check what the "this" variable is in you ajax callback function. I suspect that it's not referring to .tariffdate

Answer 2

In the AJAX completed handler the instance of this is changed to the ajax object. You'll need to save the instance of this to an object and use that object. For example:

$(".tariffdate").click(function () {
   var property_id = $('#property_id').attr("value");
   var tariff_id = $('#tariff_id').attr("value");
   var tariff_date = $(this).attr("id");
   var tariff = $(this);
   $.post("/admin/properties/my_properties/booking/edit/*", 
      { property_id: property_id, tariff_id: tariff_id, tariff_date:  tariff_date },
      function(data) {
         var bgcol = '#' + data;
         tariff.css('background-color',bgcol);
         alert("Color Me: " + bgcol);
      }
   );
});