Question

I’m trying to replace a div with its updated version using $.get. I’m doing something like this :

$('.clickable').click( function() { 
   $.get(url, function(data) {
      $(this).replaceWith(data);
   });
});

But it doesn’t seem to work. I guess this $(this) doesn’t like to be changed that way, or should it work? In case it shouldn’t I would like to retrieve the attributes values of the current div by searching the data, is it possible ?

Edit : Removed $.get(url + ' #' + $(this).attr('id') because it seems $.get does not behave like load() actually. Hence, the div replaced is going to display the whole data… If anyone has a proper solution to select just a part of the data, I would appreciate. Add a commentary or something.

Answer 1

$('.clickable').click( function() { 
   $.get(url + ' #' + $(this).attr('id'), function(data) {
      $(this).replaceWith(data); // here
   });
});

In the scope of your callback, this refers to the callback itself. Use another variable temporary storing the clickable:

$('.clickable').click( function() { 
   var that = this;
   $.get(url + ' #' + $(this).attr('id'), function(data) {
      $(that).replaceWith(data);
   });
});