Cant Update Dom after jQuery Ajax Request

JavaScript
1

Hi,

I’m trying to update my page with either a yes or a no, I’m using Ajax for the request to the server. The request works perfectly, however when I try to update the DOM with the server response using $(this).text(response.waiting); and $(this).html(response.waiting);.

I’ve tried alert(response.waiting); and returns a valid response. So, the problem probably stems from the DOM.

$("#data a.waiting").each(function(i){
	$(this).click(function() {
		$(this).html('<img src="../img/loading.gif" id="loadwait" alt="Loading..." />').fadeIn("slow");
		$.ajax({
			type: "POST",
			url: "waiting/ajax/",
			data: "id=" + $(this).attr("name"),
			dataType: "json",
			success: function(response) {
				$("#loadwait").hide();
				$(this).show();
				$(this).html(response.waiting);
			}
		});
	});
});

I really need some help on this, feel free to throw any ideas forward.
Thanks.

2

Hi again,

I’ve figured this out, I’m kicking myself now though because I should have seen it ages ago. The problem was a loss of scope, I fixed it by assigning var self = $(this);