Asynchronous callbacks

Question

I've written a function which makes an asynchronous request using jQuery.

var Site = {
 asyncRequest : function(url, containerId) { 
 $.ajax({
 url : url,
 onSuccess: function(data){
 $(containerId).html(data);
 }
 });
 }
}

Syntax might be slightly wrong as I'm using notepad, but hopefully you get the idea.

I call the function:

Site.asyncRequest('someurl', container1);
Site.asyncRequest('someurl', container2);

Both requests get sent and processed by the server. Two responses get sent back, which is what I expect. However, I would expect container1 and container2 to contain responses from both requests.

The problem, is that only the last response gets displayed and I can't figure out why. I don't know how the jQuery ajax keeps a track of requests/responses, so maybe this is a problem.

Say I make 5 or 10 requests, how does jQuery ajax know which response is for which request and where does it keep a track of it?

Thank you

• user338195: Hi, thank you. I could try passing a function as a parameter and then call that function from OnSuccess. I'll see if I can get that to work. My main concern is that I can't easily debug and track what's happening.

Answer 1

This appears to be a Javascript scoping issue. Try the following:

var Site = {
 asyncRequest: function(url, containerId) {
 (function(theContainer) {
 $.ajax({
 url: url,
 onSuccess: function(data) {
 $(theContainer).html(data);
 }
 });
 })(containerId);
 }
};

This creates a separate scope for each function call, so the actual value pointed to by "theContainer" is different for each onSuccess anonymous function.

• user1207456: @SheikhHeera, that's not the case, actually, for a somewhat obscure reason: The .ajax method is using the url parameter within the current event of the event loop while the containerId/theContainer value is being used in another event later on in the event loop. Since Javascript is a single thread, it's impossible for the url parameter to be anything other than what we intended it to be. We'd only have to re-scope the url if the onSuccess function needed to make use of it.

Answer 2

What is happening here is a single closure is getting created, due to the way that function is declared. See "A more advanced example" here: http://skilldrick.co.uk/2010/11/a-brief-introduction-to-closures/

Basically, the containerId is being shared among all instances of that onSuccess anonymous function. I haven't tested this, but I believe if you defined your asyncRequest function outside of Site, this would work.

As far as a more elegant solution to this problem, perhaps someone else will answer better.