Question

I am wondering how I use Jquery selectors within the Ajax response. My site has a feed and each main block has a unique ID, but I dont want to uniquly ID every div thats within that (which is alot). So far $(this) returns the clicked ID from within the main event handler, but when I use it within the response function, I get ‘undefined’. How can I achieve the same effect as $(this) from within the response or do I have to find a unique ID somewhere?

The main function is being called via a hyperlink with a specific rel attribute

     function(msg){ 

      var container = $(this).parent().attr('id');   
      alert (container); //returns undefined

      }

Answer 1

Since the function is an AJAX callback, you can use the context setting:

$.ajax({
    // ...
    context: this,
    success: function(msg) {
        // Here, 'this' refers to the same object as when ajax() was called.
        var containerId = $(this).parent().attr("id");
        window.alert(containerId);
    }
});

You can also have the callback function called in the context of the container itself:

$.ajax({
    // ...
    context: $(this).parent().get(0),
    success: function(msg) {
        // Now, 'this' refers to the container element.
        var containerId = $(this).attr("id");
        window.alert(containerId);
    }
});