Question

I think I am having a problem with the scope of ‘this’ when needing to do a simple css change on an element based on an Ajax return.

$('.time_slot_holder').click(function(){
    var data_day=$(this).data('agent_day');
    var data_time=$(this).data('agent_time');
    var data="agent_id="+agent_id+"&day="+data_day+"&time="+data_time
    $.ajax({
        type:"POST",
        url:"admin_includes/book_time.php",
        data:data,
        success:function(html){
            var split_html=html.split("|")
            if(split_html[0]=="B"){
                //booking exists
                alert("Bookings for this time slot exist. Contact Agent to arrange a re-assignment of this appointmnet.");
            }
            if(split_html[0]=="C"){
                //added to db
                $(this, '.time_slot_holder').css('background-color', 'red');
            }
            if(split_html[0]=="D"){

            }
        }
    });//end ajax
});

All I am trying to do is change the color on a grid with elements .time_slot_holder

Ignore the clumsy split callback from the ajax request this was just an attempt to identify the element via data attributes. Basically I need to get the reference of the clicked element through to the callback of the ajax.

Answer 1

You should set the context option in the AJAX request to this;

$.ajax({
    type:"POST",
    url:"admin_includes/book_time.php",
    context: this,
    //..
});

Otherwise, this ends up being the jqXHR object.

Another (more common) approach is to store the value of this in another variable;

var that = this;

$.ajax({
    type:"POST",
    url:"admin_includes/book_time.php",
    data:data,
    success:function(html){
        // Use `that` instead of `this` in here.
    }
});//end ajax

Also, I’m not sure what $(this, '.time_slot_holder') is supposed to be selecting, but I’m not sure it’ll work (need to see your HTML markup).

If this is a descendant of '.time_slot_holder', then it’ll work fine.